一.设计小程序的整体页面
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: ‘’,
}) // 成功提示框