小程序 (一)
一、概念
1、小程序的逻辑层与渲染层是分开的,逻辑层 js 运行在JSCore中,渲染层是 WXML 和 WXSS ,使用Webview进行渲染,小程序没有完整的浏览器对象。
2、小程序的运行环境
运行环境 逻辑层 渲染层
ios JavascriptCore WKWebview
Android v8 chromium 定制内核
小程序开发者工具 NWJS chrom webview
3、小程序代码构成
.json 文件 --> 配置文件
.wxml --> 模板文件
.wxss --> 样式文件
.js --> Js 脚本逻辑文件
4、小程序通信:
5、WXML
1、wxml与vue相似,通过 {{ }} 将数据绑定到页面中,text 是行内元素,view是块元素。
2、列表渲染:列表渲染的属性,也需要写在{{}}中,如wx:for="{{arr}}",若写成wx:for="arr"会被当做字符串处理
<view>
<view wx:for="{{arr}}" wx:key="{{index}}">{{item}}</view>
</view>
3、条件渲染:wx:if wx:elif wx:eles
<view wx:if="{{judge}}"> <text>judge为true时显示</text> </view> <view wx:else> <text >judge为false时显示</text> </view>
4、模板:小程序同样支持 template,给 template 标签设置name属性,表示该模板的名称。在使用时,通过is属性选择相应名称的模板进行调用,且可以通过data属性传入相应参数。
<!--wxml--> <template name="staffName"> <view>FirstName: {{firstName}}, LastName: {{lastName}}</view> </template> <template is="staffName" data="{{...staffA}}"></template> <template is="staffName" data="{{...staffB}}"></template> <template is="staffName" data="{{...staffC}}"></template> // index.js Page({ data: { staffA: {firstName: 'Hulk', lastName: 'Hu'}, staffB: {firstName: 'Shang', lastName: 'You'}, staffC: {firstName: 'Gideon', lastName: 'Lin'} } })
5、事件:为标签绑定事件,可以用 bind+事件名 作为属性,方法名称不需要用 {{}} 绑定,与 vue 不同,绑定的方法不支持传参。小程序由于在移动端,绑定点击事件不能用 bindclick ,而是需要用 bindtap 。在方法中获取数据需要 this.data[name] , 修改数据需要 this.setData 方法。
<!--wxml--> <button type="primary" bindtap="onTap"> 修改条件渲染 </button> onTap() { this.setData({ judge: !this.data.judge }) } // 与data属性平级
6、scroll-view : 用来创建滚动视图,但需要设置 scroll-y="{{true}}" 才可以启动纵轴方向的滚动,同时需要通过 wxss 设置高度,超过高度才会触发滚动。
<scroll-view scroll-y="{{true}}" style="height: 100rpx;">
<view wx:for="{{arr}}" wx:key="{{index}}">{{item}}</view>
</scroll-view>
7、icon : 用来创建一个图标,它可以通过 type 属性使用微信的内置图标类型,如:success, success_no_circle, info, warn, waiting, cancel, download, search, clear。 还有 size 、color 属性。所有图标都是矢量图。若需要为图标插入文本,使用 text 标签即可。
<icon type="success" size="23" color="green" /> <text >成功</text>
8、navigator : navigator类似于HTML中的a标签,可通过 url 属性设置跳转地址,仅支持当前小程序内的跳转。
<navigator url="/pages/login/login">跳转到login</navigator>
9、radio 和 checkbox : radio 和 checkbox 都需要放在 radio-group 和 checkbox-group 标签中使用,前者用于实现单选功能,后者用于数据分组。
<form action=""> <radio-group> <label wx:for="{{options}}" wx:for-item="item" wx:key="{{item.id}}"> <radio value="{{item.value}}" /> {{item.name}} </label> </radio-group> <checkbox-group> <label wx:for="{{options}}" wx:for-item="item" wx:key="{{item.id}}"> <checkbox value="{{item.value}}" /> {{item.name}} </label> </checkbox-group> </form>
10、picker : picker 可以创建一个选择器,默认的 mode 为普通选择器 selector ,它还支持多列选择器,时间选择器,日期选择器,省市区选择器。
picker的children可以是一个标签,点击children时会弹出选择器。
picker的range属性为必须,它可以绑定Array / Object Array,其值为选择器的选项,当其类型为Object Array时,需要用range-key属性指定选择器显示的内容。
picker的value属性为必须,绑定的是选中项目的index。
当选择器发生选择时,需要通过bindchange事件改变绑定的value值,bindchange的参数为event,其中event.detail = {value: value}。
<!--wxml--> <form > <picker mode="selector" range="{{options}}" value="{{pickerSelected}}" bindchange="onPickerChange"> <view >{{pickerSelected}}</view> </picker> </form> // js onPickerChange(event) { this.setData({ pickerSelected: event.detail.value }) }
6、WXSS
1、wxss 与 css 不同 :
(1)没有 body ,可以通过对 page 设置样式,来影响整个页面的样式;也可以在 page 的 .json 中设置backgroundColor属性,来设置 page 下拉时出现空白区域的颜色,当页面有下拉刷新、上拉加载功能时,需要设置 backgroundColor 属性。
page {
background:#F8F8F8
}
2、新增了尺寸单位 rpx , 在小程序里依旧可以使用 px 、em 等尺寸单位。rpx 可以根据屏幕的宽度进行自适应,它规定屏幕的宽为 750rpx , 1 rpx = 0.5 px = 1 物理像素
3、样式引入 :可以直接导入第三方的 wxss 文件。
@import "common.wxss"; .middle-p { padding:15px; }
4、内联样式 :和 css 一样,wxss 支持 class 和 style 两种样式,但在用法上有区别:如果样式中有动态内容,将其写到 style 中,其他的都放到 class 文件中。如果 style 中样式写的过多,小程序在渲染视图的时候还要解析对应的样式布局,对性能有影响。
<view style="color:{{color}};" />
5、选择器 :
6、全局样式与局部样式:局部样式会覆盖app.wxss 中相同的选择器。