完成第一个微信小程序之小程序开发总结

一.设计小程序的整体页面
1.小程序的整体设计在app.js app.wxss app.wxml中
app.wxss：负责整个小程序的整体默认样式包括但不限于小程序的背景颜色，字体样式和大小等等
app.json：负责小程序整体的页面跳转，其中所有在小程序中的wxml都要写入page中（一般新建文件会自动添加进入，但删除已有的wxml需要手动在page中删除），window则是实现页面上边框的各种属性，tabBar控制页面的下导航栏
tabBar代码样式
“tabBar”: {
“color”: “#000000”,
“selectedColor”: “#328EEB”,
“list”: [
{
“pagePath”: “pages/index/kaipiaoliebiao/kaipiaoliebiao”,
“text”: “页面一”,
“iconPath”: “图标地址”,
“selectedIconPath”: “选中后图标地址”
},
{
“pagePath”: “pages/admin/admin”,
“text”: “页面二”,
“iconPath”: “图标地址”,
“selectedIconPath”: “选中后图标地址”
}
]
},
app.js：负责控制小程序整体的js设计默认的有wx.login登录和wx.getSetting获取用户信息（需要用户授权）还可以在这里面手动设计全局变量。

二.小程序登录获取用户的信息
1.获取用户信息
新建一个按钮，在button中加入open-type=“getUserInfo” 和 bindgetuserinfo=“bindGetUserInfo” 在js中新建bindGetUserInfo（e）方法即可获取到用户的姓名，头像，城市，性别等信息（需要用户授权通过）
2.获取用户手机号
比较私密的信息需要进一步授权才能完成，首先要保证该小程序是一个商户而不是个人，在微信公众平台的小程序部分申请后方可使用
首先新建一个button 加入open-type=“getPhoneNumber” bindgetphonenumber=“getPhoneNumber” 在js里面的页面加载onload（）方法中加入wx.login()获取到微信的code值然后getPhoneNumber（e）中获取到微信的encrypted和iv将这三个值发送到后端解密，后端返回手机号。

三.常用的微信集成的方法
1. wx.request({
url: ‘’ ,
method: ‘POST’,
header: {
‘content-type’: ‘application/json’
},
data:{
},
success: function (res) {
},
fail:function(res){
console.log(res)
}
})
微信的接口传递的方法 类似与ajax和jsonp
2.页面跳转
2.1
wx.switchTab({
url: ‘…/…/my/my’,
success: (res) => {},
fail: (res) => {},
complete: (res) => {},
}) 可以跳转到tabbar对应的相关页面，但携带参数需要设计全局变量
2.2
wx.reLaunch({
url: ‘/pages/my/my’,
}) 关闭当前页面重新进入
2.3
wx.navigateTo 最常用的跳转—保留当前页面跳转（可携带参数）缺点是不能跳转到tabbar页面
3.提示框
.3.1
wx.showModal({
title: ‘’,
}) // 普通提示框
3.2
wx.showLoading({
title: ‘’,
}) // 等待提示框
3.3
wx.showToast({
title: ‘’,
}) // 成功提示框