最近公司写小程序，现在总结下，后期会慢慢补充。
目前包含（ wx:for 、wx:key 、data-index 、 bindtap、自定义属性传值以及修改状态值、页面传值、heder样式设置、tabbar设置、自定义组件以及传值、本地存储）
1.
wx:for
wx:key
data-index
bindtap
index.wxml下
下标{{index}} {{item.name}}
index.js下
data: {
list:[{name:"张三"},{name:"王五"}],
},
oalert:function(e){
console.log(e.currentTarget.dataset.index)
}
2.自定义属性传值以及修改状态值：
index.wxml下
{{name}}
index.js下
data: {
name:'旧数据'
},
upData:function(e){
this.setData({
name: e.currentTarget.dataset.ojson
})
}
3.页面传值（A:当前页面，B:下级页面）
A界面 -->B界面
用 navigator标签或 wx.navigator传值，A界面向B界面传id值,
A界面获取id值传向B界面如果需要传多个参数, 用 & 链接即可
// 方法一：navigator标签传值方法
传值
传值
// 方法二： wx.navigator标签传值单值、多值传递方法
wx.navigateTo({
url: '/page/index/index?id=' + id
})
wx.navigateTo({
url: '/page/index/index?id=' + id +'&name='+ name
})
B界面接受id值
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var id = options.id;
this.setData({
id:id,
name:name
})
},
在A界面需要接受B界面传过来值码如下：这里要在onShow方法里面重新调用你的数据请求或是，为了验证是否传值成功，你可以打印验证 注：由于你从B界面返回A界面使用了wx.navigateBack，所以当你回到A界面后onLoad、onReady方法不响应，onShow方法响应，所以这里你需要特别注意--生命周期
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
//获取数据
this.gainData()
// 打印你的传值
console.log("res==", this.data.res)
}
4.header样式
/***根目录app.json下***/
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#4dc1c1", //背景色
"navigationBarTitleText": "预约挂号", //头部名称
"navigationBarTextStyle":"#fff" //字体颜色
}
5.tabBar设置（个数为大于2个，小于等于5个）
/***根目录app.json下***/
"tabBar": {
"color": "#464a56", //tabbar未选中时字体颜色
"selectedColor": "red", //tabbar选中时字体颜色
"backgroundColor": "#FFFFFF",//tabbar背景颜色
"borderStyle": "white", ////tabbar上边框颜色
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/h1.png", //未选中时展示的图片
"selectedIconPath":"images/h2.png" //选中时展示的图片
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "images/x1.png",
"selectedIconPath":"images/x2.png"
}
]
},
6.自定义组件
6.1. 前期准备
6.1.1.在pages文件夹下创建一个components文件夹用来盛放我们所有的自定义组件.
6.1.2.在components文件夹下创建一个ct的文件夹用来盛放ct这个自定义组件,并分别创建好对应的配置文件
6.2. 自定义组件声明
要在ct.json中进行自定义组件声明,告诉开发者这是一个组件:
{
"component": true
}
6.3. 设计组件结构
在 wxml 文件中编写组件模版，在 wxss 文件中加入组件样式:
ct.wxml文件
{{innerText}}
ct.wxss文件
/* 自定义组件样式设置（只在当前组件内有效） */
.inner {
color: red;
}
这里的`
并且自定义组件在设计结构的时候是不应该使用给便签加上id或者使用属性选择器和标签名选择器的.
这是因为组件就是被我们那里重用的,而页面中只能允许有一个id.
6.4: 注册组件
在自定义组件的js文件中,需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法,如在ct.js中:
Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
innerText: {
type: String,
value: 'default value',
}
},
data: {
// 这里是一些组件内部数据
someData: 1
},
methods: {
// 这里是一个自定义方法
customMethod: function () {
console.log('customMethod')
}
}
})
6.5: 使用自定义组件
这里我为了简便一点,就直接用自带的logs页面来进行自定义组件的调用吧.
首先,你应该在你要用组件的那个页面中引用声明.也就是在.json文件.
如在logs.json中:
{
"navigationBarTitleText": "查看启动日志",
"usingComponents": {
"component-tag-name": "../components/ct/ct"
}
}
接下来我们就可以在页面中像使用其他组件一样的使用自定义组件了.
比如我在logs.wxml中使用:
6.6: 使用slot
在上面的例子中,在ct.wxml中写入了
也就是说如果我们把上面logs.wxml改动一下:
这里是插入到组件slot中的内容
并且
上面的例子中我是将slot放在button之下:
{{innerText}}
你也可以将它放在其他位置来达到不同的效果.
6.7: 使用多个slot
正常情况下,一个组件中只有一个slot,但有时候我们的自定义组件可能不止使用一个slot,别怕,我们的微信小程序也是可以允许你这样的.
需要使用多slot时，可以在组件js中声明启用
6.7.1.在ct.json(你自定义组件的json文件)中声明
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: { /* ... */ },
methods: { /* ... */ }
})
6.7.2.此时，可以在这个组件的wxml中使用多个slot,以不同的 name 来区分:
6.7.3.使用时，用 slot 属性来将节点插入到不同的slot上。
头部的内容
底部的内容
7.本地存储（存储大小限制为 10MB）
以下为微信提供的方法：wx.setStorage、wx.setStorageSync、wx.getStorage、wx.getStorageSync、wx.clearStorage、wx.clearStorageSync、实现对数据本地缓存、获取、清除。可参考微信小程序【数据缓存】开发文档。
在A界面获取数据并缓存到本地
wx.setStorageSync('user_info', {'name':'ct'});
在B界面获取数据并缓存到本地
var user_info = wx.getStorageSync("user_info")
this.setData({
username: user_info.name
});
从本地缓存中同步移除指定 key。这里具体使用同步或是异步需要根据你存储时的方法，或是同步清理本地数据缓存wx.clearStorageSync()
wx.removeStorageSync("user_info")
需要注意存储、获取的顺序，先存后取。