开发前准备
1、开发者工具下载。👉下载
2、注册申请等。
小程序主要文件及作用
组件使用
见官网。👉打开
小程序单位
物理和逻辑分辨率转换
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
WXML数据绑定
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
注意:
条件渲染和列表渲染
wx:if wx:elif wx:else
wx:for wx:for-index wx:for-item
模板及引入
1.创建公用页面template.wxml1
2
3
4
5
6
7<template name="header">
<view class="header">这是头部内容</view>
</template>
<template name="footer">
<view class="footer">这是底部内容</view>
</template>
2.引入应用1
2
3
4
5
6wxml:
<import src="/pages/template/template"/>
wxss:
@import "/pages/template/template"
应用：<template is="header">
事件处理及数据交互
1、变量不是一定要初始化
2、setData({ })
3、bindtap
4、catchtap 阻止冒泡事件
小程序的全局配置
1、tabBar导航栏页面跳转
