月初，公司安排了小程序开发方案。在此之前，盲人了解过一些小程序开发。本次开发对小程序有了更立体的认识。隐私保护隐藏修改不合理样式）：0：新页面添加小程序及目录结构说明a）components：组件，本次开发用不到就不赘述b）custom-tab-bar：小程序底部的固定菜单，不包括c)images：小程序中使用的所有图片，您也可以根据需要添加，不包括d)pages：小程序的所有页面，用索引和标志初始化，可以根据需要进行增删改e)utils：所有工具js，本项目封装了时间格式等jsf)app.js：全局js，可以定义一些变量或者js可以被整个js使用.使用“constapp=getApp();”在pages/xxx.js中然后使用app.customFunctionName()引用你在xxx.js中的自定义变量或方法g)app.json:全局配置，可以添加pages(.pages),top([.window](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html))和底部([.tabBar](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html))，在pages[]中添加路径后，pages文件夹会自动创建一个同名指向的文件，更快更方便。另外，**pages中第一个路径默认为小程序首页**h)app.wxss全局样式1：微信授权页面(app.json:pages:["pages/oauth/oauth"])功能：a)点击授权按钮，询问用户是否授权b)获得授权后，使用wx.一个明确的点击后退出小程序的按钮（按需，因为毕竟大部分习惯使用小程序的人更喜欢右上角的关闭按钮）样式图（修改后）：踩点：1：背景image(截图已换成纯色背景)不能直接使用background:url(相对路径(../../images/...))不能使用，只能使用https的全路径.或者用.wxml中的替换，整理oauth.wxml和oauth.wxss的样式。见下图2：微信授权按钮中有一个微信图标。不管宽高怎么调整，总会有一点变形，到时候图片标签就知道了。有内置固定宽高，需要添加属性mode让图片宽高自适应/**wxml:**/.wx-logo{宽度：40rpx；margin-right:20rpx;}3:阻塞接口请求，等待接口返回再往下走constapp=getApp();Page({//授权登录//授权获取用户信息goOauth(){wx.getSetting({//获取用户授权信息success:(res)=>{if(!res.authSetting['scope.userInfo']){//是否有获取授权访问个人信息scope.userInfowx.authorize({scope:'scope.userInfo',success:(res)=>{this.getUserinfo()}})}else{this.getUserinfo()}}})},getUserinfo(){wx.getUserProfile({desc:'必须授权才能继续使用',success:res=>{letuser=res.userInfo//设置本地缓存，在本地缓存用户信息wx.setStorageSync('user',user);//跳转到letlogincallbacafter登录成功k=this.oauthPassed;app.wx_gettoken(logincallback);}})},//获得用户授权后跳转到首页homeoauthPassed(data){wx.setStorageSync("isunbind",null);//跳转到首页（首页有tabBar，不能使用navigateTo）wx.switchTab({url:'../home/home'})},})App.wx_gettokenconstutils=require('utils/util')App({globalData:{currentDate:"",currentTime:"",currentDateTime:"",},//微信登录获取接口tokenwx_gettoken(callback){wx.login({success(res){if(res.code){leturl="https://xxxx/intoSchool/onLogin";letdata={code:res.code}utils.requestPromise(url,data).then((res)=>{if(res.data&&res.data.token){//成功wx.setStorageSync('logintoken',res.data.token);callback()}})}else{console.log('登录失败!'+res.errMsg)}}})},//获取用户信息wx_getuserinfo(callback){consttoken=wx.getStorageSync('logintoken');wx.request({url:'https://xxxx/intoSchool/user/getUserInfo',data:{token:token},header:{'content-type':'application/x-www-form-urlencoded'},method:"POST",success(res){if(res.data){//成功回调(res.data)}}})},//checkNull(itemVal,title){if(typeofitemVal=="undefined"||itemVal==null||itemVal===""){wx.showModal({title,icon:'none'})returnfalse}returntrue},checkRule(itemVal,rule,title){让结果=rule.test(itemVal);if(!result){wx.showModal({title,icon:'none'})returnfalse}returntrue},})2:主页(app.json:pages:["pages/home/home"])陷阱：1：自定义tabBar建议大家不用官网直接下载demo，复制代码官网，滑到最下面，有demo根据官网第一步：复制0点的custom-tab-bar文件夹index.js，应该暴露为组件；剩下的可以配置一些背景或者字体颜色，图片路径，点击后跳转路径如下，不能以'../'开头Component({data:{selected:0,color:"#666",selectedColor:"#333",列表:[{pagePath:"/pages/home/home",iconPath:"/images/1.png",selectedIconPath:"/images/1-1.png",text:"Home"},{pagePath:"/pages/centre/centre",iconPath:"/images/2.png",selectedIconPath:"/images/2-1.png",text:"My"}]},附上(){},方法:{switchTab(e){constdata=e.currentTarget.datasetconsturl=data.pathwx.switchTab({url})this.setData({selected:data.index})}}})2：在app.json中配置tabBar信息{"tabBar":{"custom":true,"list":[{"pagePath":"pages/home/home","text":"Home"},{"pagePath":"pages/centre/centre","text":"My"}]}}app.json配置会被custom-tab-bar文件夹下的配置覆盖，但是里面的列表是必须的，菜单个数要和实际菜单个数一致3：在home.js和centre.js中，进入页面时需要高亮当前tab//centre.jsonShow(){//...//底部标签栏高亮当前if(typeofthis.getTabBar==='function'&&this.getTabBar()){this.getTabBar().setData({selected:1})}//...}//home.jsonShow(){//...//底部标签栏突出显示当前if(typeofthis.getTabBar==='function'&&this.getTabBar()){this.getTabBar().setData({selected:0})}//...}
