目录（各种框架通用套路）
- 一、静态页面
- 二、生命周期
- 三、获取数据
- 四、渲染页面
- 五、绑定事件
- 六、路由
- 七、页面传参
- 八、存储(本地存储)
- 九、自定义组件
一、小程序静态页面
（1）使用小程序组件,view相当于div（块级元素），text相当与span（行内元素）
-
（2）使用rpx作为小程序单位，可以根据屏幕宽度进行自适应。
1px = 2rpx- 开发微信小程序时设计师可以用 iPhone6
（width= 750rpx）作为视觉稿的标准。
（3） page{} 该页面的最外层的容器标签，常用于给该页面设置背景颜色
-
（4）开放数据
open-data- 用于展示微信开放的数据。
- 如用户名，性别
<open-data type="userAvatarUrl"></open-data> <open-data type="userGender" lang="zh_CN"></open-data> -
（5）导入有赞小程序ui库到项目中（有赞的自定义组件）
- 使用文档地址：https://youzan.github.io/vant-weapp/#/intro
- 下载有赞小程序ui库，将其中的dist文件导入到我们的项目的根目录
npm i vant-weapp -S --production
- 配置app.json文件中，在
"usingComponents"中将dist中所有的组件引入
"usingComponents": {
"van-action-sheet": "./dist/action-sheet/index",
"van-area": "./dist/area/index",
"van-badge": "./dist/badge/index",
"van-badge-group": "./dist/badge-group/index",
"van-button": "./dist/button/index",
"van-card": "./dist/card/index",
"van-cell": "./dist/cell/index",
"van-cell-group": "./dist/cell-group/index",
"van-checkbox": "./dist/checkbox/index",
"van-checkbox-group": "./dist/checkbox-group/index",
"van-col": "./dist/col/index",
"van-dialog": "./dist/dialog/index",
"van-field": "./dist/field/index",
"van-goods-action": "./dist/goods-action/index",
"van-goods-action-icon": "./dist/goods-action-icon/index",
"van-goods-action-button": "./dist/goods-action-button/index",
"van-icon": "./dist/icon/index",
"van-loading": "./dist/loading/index",
"van-nav-bar": "./dist/nav-bar/index",
"van-notice-bar": "./dist/notice-bar/index",
"van-notify": "./dist/notify/index",
"van-panel": "./dist/panel/index",
"van-popup": "./dist/popup/index",
"van-progress": "./dist/progress/index",
"van-radio": "./dist/radio/index",
"van-radio-group": "./dist/radio-group/index",
"van-row": "./dist/row/index",
"van-search": "./dist/search/index",
"van-slider": "./dist/slider/index",
"van-stepper": "./dist/stepper/index",
"van-steps": "./dist/steps/index",
"van-submit-bar": "./dist/submit-bar/index",
"van-swipe-cell": "./dist/swipe-cell/index",
"van-switch": "./dist/switch/index",
"van-switch-cell": "./dist/switch-cell/index",
"van-tab": "./dist/tab/index",
"van-tabs": "./dist/tabs/index",
"van-tabbar": "./dist/tabbar/index",
"van-tabbar-item": "./dist/tabbar-item/index",
"van-tag": "./dist/tag/index",
"van-toast": "./dist/toast/index",
"van-transition": "./dist/transition/index",
"van-tree-select": "./dist/tree-select/index",
"van-datetime-picker": "./dist/datetime-picker/index",
"van-rate": "./dist/rate/index",
"van-collapse": "./dist/collapse/index",
"van-collapse-item": "./dist/collapse-item/index",
"van-picker": "./dist/picker/index"
}
二、小程序生命周期
三、获取数据
- （1） 小程序只支持https
- （2）需要配置域名白名单
- （3）开发阶段可以取消域名校验 开发者工具右上角点击详情 ==> 不校验合法域名
四、渲染页面
- （1）在模板上直接获取data中的数据
<view> {{ message }} </view>
（2）在js中通过
this.data.xxx获取data中的数据，通过this.setData()修改data中的数据（3）条件渲染
wx:if="{{}}"
<view wx:if="{{show}}"> True </view>
- （4）列表渲染
wx:for="{{}}"，在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
五、事件绑定
-
（1）在组件中绑定一个事件处理函数。：
bind:事件名- 如
bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
- 如
<viewbindtap="tapName"> Click me! </view>
（2）小程序绑定的函数无法传参，需要
data-xxx自定义属性，通过event.currentTarget.dataset.xxx（3）小程序使用
bind绑定事件会有事件冒泡，使用catch来绑定事件可阻止事件冒泡
六、路由
1、页面路由配置
- 在app.json文件的
"pages"中配置
"pages": [
"pages/index/index",
"pages/logs/logs",
]
2、导航
- （1）普通页面跳转：
<navigator></navigator>
<navigator url="/pages/index/index">跳转到新页面</navigator>
- （2）tabBar页面跳转：添加属性
open-type="switchTab"
<navigator open-type="switchTab" url="/pages/index/index">跳转到新页面</navigator>
- （3）JS：普通页面跳转
wx.navigateTo({
url: '/pages/index/index'
})
- （4）JS：tabBar页面跳转
wx.navigateTo({
url: '/pages/index/index'
})
七、页面传参
-
（1）传参方式：通过url进行传参，使用？问号携带参数
- 标签方式
<navigator url="/pages/index/index?id=123">跳转到新页面 </navigator>- JS方式
wx.navigateTo({ url: '/pages/index/index?id=123' }) - （2）接收参数：在目标页面的onLoad生命周期中接收传过来的参数
onLoad: function (options) {
console.log(options.id) // id=123
}
-
（3）页面传参传对象：小程序不支持直接传递对象，需要将对象先转换成JSON数据，然后再在接收页面转换成原来的数据类型
- 传送方
let dataStr = JSON.stringify(data); wx.navigateTo({ url: `/pages/index/index?dataStr=${data}` })- 接收方
onLoad: function (options) { let data = JSON.parse(options.dataStr) }
八、数据缓存
- （1）存
try {
wx.setStorageSync('key', 'value')
} catch (e) { }
- （2）取
try {
var value = wx.getStorageSync('key')
} catch (e) { }
- （3）清除
try {
wx.removeStorageSync('key')
} catch (e) { }
