月初公司安顿了一个小程序开发程序
之前盲人摸象般的理解过一些小程序开发
本次开发对小程序有一些更平面的意识
页面阐明（请原谅截图中因爱护隐衷被暗藏和批改后的不合理款式）：
0：小程序新页面增加及目录构造阐明
a) components:组件，本次开发中没有应用到我就不开展细说了 b) custom-tab-bar:小程序底部的fixed菜单，非自带 c) images:小程序用到的所有图片，你也能够按需减少，非自带 d) pages:小程序所有页面，初始化有一个index和logo，能够按需增删改 e) utils:所有工具类js,本我的项目封装了工夫格局等js f) app.js:全局js,可定义一些整个js能够应用的变量或者js。在pages/xxx.js中用'const app = getApp();'引入之后再xxx.js中就能够用app.customFunctionName()的形式来援用你自定义的变量或办法了 g) app.json:全局配置，能够减少页面(.pages)，减少顶部([.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.login拿到code后调用咱们本人开发的API获取token(小程序的其余接口均须要该token能力发动调用 c)页面给一个显式按钮，点击后退出小程序（按需，因为毕竟大多数习惯应用小程序的人，更喜爱用右上角的敞开按钮）款式图（改后）：
踩坑点：
1：背景图（截图已替换成纯色背景）不能间接用background:url(相对路径(../../images/...))不能用，只能用https的残缺门路。或者在.wxml中用<image>代替，做款式整顿oauth.wxml及oauth.wxss见下
2：微信受权按钮里有一个微信的icon，宽高不管怎么调总有一点变形，之后才晓得image标签有内置的固定宽高，须要加属性mode让image宽或者高自适应
/**wxml：<image mode='widthFix' src="/images/wx.png" class="wx-logo"></image>**/.wx-logo{ width: 40rpx; margin-right: 20rpx;}3：接口申请的阻塞，等接口有返回之后才接着往下走
const app = getApp();Page({ //受权登录 // 受权获取用户信息 goOauth(){ wx.getSetting({//获取用户受权信息 success:(res)=> { if (!res.authSetting['scope.userInfo']) {//是否有拿到用受权拜访个人信息scope.userInfo wx.authorize({ scope: 'scope.userInfo', success:(res)=> { this.getUserinfo() } }) }else{ this.getUserinfo() } } }) }, getUserinfo(){ wx.getUserProfile({ desc:'必须受权后能力持续应用', success:res=>{ let user=res.userInfo //设置本地缓存,把用户信息缓存到本地 wx.setStorageSync('user',user); // 登录胜利后去跳转 let logincallback = this.oauthPassed; app.wx_gettoken(logincallback); } }) }, // 获取到用户受权后跳转至首页home oauthPassed(data){ wx.setStorageSync("isunbind",null); //跳转至首页（首页有tabBar,不能用navigateTo） wx.switchTab({ url: '../home/home' }) },})另附app.js的app.wx_gettoken
const utils = require('utils/util')App({ globalData: { currentDate:"", currentTime:"", currentDateTime:"", }, // 微信login获取接口token wx_gettoken(callback){ wx.login({ success (res) { if (res.code) { let url="https://xxxx/intoSchool/onLogin"; let data={ 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){ const token=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){//胜利 callback(res.data) } } }) }, // checkNull(itemVal,title) { if (typeof itemVal == "undefined" || itemVal == null || itemVal === "") { wx.showModal({ title, icon: 'none' }) return false } return true }, checkRule(itemVal, rule,title) { let result = rule.test(itemVal); if (!result) { wx.showModal({ title, icon: 'none' }) return false } return true },})2：首页(app.json : pages:[ "pages/home/home"])
踩坑点：
1：自定义tabBar
我倡议大家无官网间接下载demo后复制代码。官网，滑到底部，有demo
依据官网步骤
1：复制第0点的custom-tab-bar文件夹index.js中应裸露为component;其余能够按需配一些背景或者字体色彩等，图片门路及点击后跳转门路如下，不能以'../'结尾
Component({ data: { selected: 0, color: "#666", selectedColor: "#333", list: [{ pagePath: "/pages/home/home", iconPath: "/images/1.png", selectedIconPath: "/images/1-1.png", text: "首页" }, { pagePath: "/pages/centre/centre", iconPath: "/images/2.png", selectedIconPath: "/images/2-1.png", text: "我的" }] }, attached() { }, methods: { switchTab(e) { const data = e.currentTarget.dataset const url = data.path wx.switchTab({url}) this.setData({ selected: data.index }) } }})2：app.json 中配置tabBar信息{"tabBar": { "custom": true, "list": [{ "pagePath": "pages/home/home", "text": "首页" }, { "pagePath": "pages/centre/centre", "text": "我的" }] }}app.json的配置会被custom-tab-bar文件夹下的配置所笼罩，然而外面的list为必填且菜单个数应该和理论菜单数目统一
3：home.js和centre.js中须要在进入页面是高亮以后tab//centre.jsonShow(){ //... // 底部tabbar高亮以后 if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 1 }) } //...}//home.jsonShow(){ //... // 底部tabbar高亮以后 if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 0 }) } //...}更新中。。。