共计 4029 个字符，预计需要花费 11 分钟才能阅读完成。
月初公司安顿了一个小程序开发程序
之前盲人摸象般的理解过一些小程序开发
本次开发对小程序有一些更平面的意识
页面阐明（请原谅截图中因爱护隐衷被暗藏和批改后的不合理款式）：
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.js
onShow(){
//...
// 底部 tabbar 高亮以后
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {this.getTabBar().setData({selected: 1})
}
//...
}
//home.js
onShow(){
//...
// 底部 tabbar 高亮以后
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {this.getTabBar().setData({selected: 0})
}
//...
}更新中。。。
正文完