在这里,我主要整理了一些小程序开发过程中常用的功能点,主题和tabBar的设置、授权检测、模板消息推送等。
1、主题和tabBar的设置,这俩会经常配置在app.json里面。
"window":{
"navigationBarBackgroundColor": "#1AAD19",//导航条背景色
"navigationBarTitleText": "某某某",
"navigationBarTextStyle":"white"//导航条文字以及图标颜色
},
"tabBar": { //list选项最少2个,最多5个
"color": "#515151",
"selectedColor": "#ff5777",
"borderStyle": "black",
"backgroundColor": "#fff",
"list": [
{
"text": "Tab1",
"pagePath": "pages/index/index",
"iconPath": "pages/image/tidan_unfocus.png",
"selectedIconPath": "pages/image/tidan_focus.png"
},
{
"text": "Tab2",
"pagePath": "pages/activity/activity",
"iconPath": "pages/image/activity_unfocus.png",
"selectedIconPath": "pages/image/activity_focus.png"
},
{
"text": "Tab3",
"pagePath": "pages/my/my",
"iconPath": "pages/image/my_unfocus.png",
"selectedIconPath": "pages/image/my_focus.png"
}
]
}
2、是否已经授权的检测
/**
* 判断是否已经授权
*/
judgeAuthorize: function() {
wx.getSetting({
success: function(res) {
if (!res.authSetting['scope.userInfo']) { //未授权
//进行弹窗提示去授权或者设置一个授权页面覆盖
}
}
})
},
需要注意的一点是:随着版本的升级,可能以后wx.getUserInfo都就无法获取用户信息了,虽然在正式版中现在还好用。官方提倡用button组件去实现弹窗授权。说实话,我真心受不了这种实现方式。按照文档设置一下:
<button class='text btn' open-type="getUserInfo" bindgetuserinfo='getInfo'>登录授权</button>
这样就监听getInfo这个回调方法就行了!
/**
* 点击获取用户授权
*/
getInfo: function(e) {
if (e.detail.userInfo) { //同意授权
app.nickName = e.detail.userInfo.nickName;
app.avatarUrl = e.detail.userInfo.avatarUrl;
self.getOpenId();
} else { //拒绝授权
wx.showModal({
title: '提示',
content: '未授权,无法正常使用小程序功能,请重新点击授权',
showCancel: false
})
}
},
后面流程就不贴代码了,就是用wx.login去获取code,再用code去获取openid,最后再把openid、昵称、头像一块提交到后台接口就ok了!
3、模板消息的推送
表单提交,指定一些属性即可。如下
<form report-submit="true" bindsubmit="commitInfo">
<button formType="submit">提交</button>
</form>
commitInfo:function(e){
console.log(e.detail.formId);
}
后台要实现模板推送,需要前台提供一个formId,需要注意两点:
1、这个formId只能使用一次,用完即失效。
2、模板消息只能推送给当前提交这个formId的微信账号,说白了,就是只能推送给自己,不能推送给别人。
如果你也想开发一款属于自己的微信小程序,可以通过第三方专业开发平台,来帮助你实现开发需求:厦门在乎科技-专注小程序、app、网站开发