# 微信小程序
一直只看过文档没有实际参与过微信小程序项目，这几天写了一个DEMO练习一下
# 目录结构
# 全局配置
app.json进行项目的全局配置，基本格式如下
{
"pages":[ ...页面路径列表
],
"window":{ ...全局的默认窗口表现
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#0068C4",
"navigationBarTitleText": "TodoList",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": true
},
"tabBar":{ ...底部 tab 栏的表现
"color":"#636567",
"selectedColor":"#2A8CE5",
"backgroundColor":"#FBFBFB",
"borderStyle":"white",
"list":[{
"pagePath": "pages/index/index",
"iconPath": "./pages/image/列表.png",
"selectedIconPath":"./pages/image/列表.png",
"text": "待办事项"
}]
},
"style": "v2",
"networkTimeout": { ...网络超时时间
"request": 10000,
"downloadFile": 10000
},
"debug": true ...是否开启 debug 模式
}
每个页面也可以通过 页面名.json进行页面的配置
# 路由
# 路由切换
# wx.redirectTo
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
# wx.navigateTo
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用wx.navigateBack可以返回到原页面。小程序中页面栈最多十层。
# wx.navigateBack
关闭当前页面，返回上一页面或多级页面。
# 路由传参
直接通过拼接的方式传值
如果参数为对象，先通过JSON.stringify转换为字符串
想要获得参数，在路由后的onLoad周期进行取值，在通过JSON.parse转换为对象
onLoad: function (options) {
var obj = JSON.parse(options.obj)
},
# 数据缓存
因为没有后端数据库，想进行一些数据交互只能在缓存中进行
微信小程序对于缓存的操作分为异步和同步，在使用过程中我比较喜欢get用同步，set都用异步
- wx.setStorageSync
- wx.setStorage
- wx.removeStorageSync
- wx.removeStorage
- wx.getStorageSync
- wx.getStorageInfoSync
- wx.getStorageInfo
- wx.getStorage
- wx.clearStorageSync
- wx.clearStorage
# 获取用户信息
通过调用getUserinfo()进行用户信息调取
现在需要通过<button open-type="getUserInfo" bindgetuserinfo='getUser'>登录</button>来进行授权处理
res里面的userInfo可以得到微信名、微信头像、地区等
# 登录（老版本有点问题）
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
# 事件处理
# bindtag
点击事件，如果需要传值可以通过data-这个字段进行传值
在函数中通过e.currentTarget.dataset获取参数
也可以通过catchtag捕捉时间并且阻止冒泡、
# 双向绑定
简易双向绑定机制。可以在对应项目之前加入 model: 前缀
只能是一个单一字段的绑定，目前，尚不能 data 路径
# 组件
中间可以使用<solt></solt>，留一个位置在父页面使用时嵌套在组件标签中
父子组件传值。像vue一样就是props改为properties
在使用时要在父组件的json文件中声明
# 总结
因为今天只实现了todolist的基本功能，只是一些基础的配置，以后项目中遇到更难的会继续记录