微信小程序开发流程
1、官网注册登录、申请AppID2、官网下载开发工具3、 创建项目4、项目目录5、对比和vue差异6、封装tabbar"tabBar": {"backgroundColor": "#ffffff","color": "#999999","selectedColor": "#222222","borderStyle": "white","list": [{"p...
·
1、 官网注册登录、申请AppID
2、官网下载开发工具
3、 创建项目
4、项目目录
5、对比和vue差异
6、封装tabbar
"tabBar": {
"backgroundColor": "#ffffff",
"color": "#999999",
"selectedColor": "#222222",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/home/index/index",
"text": "首页",
"iconPath": "images/tabbar1.png",
"selectedIconPath": "images/tabbar1-active.png"
},
{
"pagePath": "pages/shop/index/index",
"text": "门店",
"iconPath": "images/tabbar2.png",
"selectedIconPath": "images/tabbar2-active.png"
},
{
"pagePath": "pages/ranking/index/index",
"text": "风云榜",
"iconPath": "images/tabbar3.png",
"selectedIconPath": "images/tabbar3-active.png"
},
{
"pagePath": "pages/statistics/index/index",
"text": "统计",
"iconPath": "images/tabbar4.png",
"selectedIconPath": "images/tabbar4-active.png"
}
]
},
7、、、、最最最 重要的封装请求
①、app.js
// app.js
const envVersion = __wxConfig.envVersion;
let token = '';
App({
//测试
// APIURL: "https://crmsrvtest.1111.cn",
// imgUrl: "https://crmsrvtest.1111.cn/assets/wximg",
//正式
APIURL: "https://crmsrv.1111.cn",
imgUrl: "https://crmsrv.1111.cn/assets/wximg",
onLaunch() {
// wx.hideTabBar()
var _this = this
//判断是否有新版本
this.autoUpdate()
//判断是否是从企业微信进入
wx.getSystemInfo({
success(res) {
if (res.environment) {
// 企业微信环境
console.log('从企业微信进入')
//获取token
//如果是生产环境又有token 就是用定义的token
if (envVersion == 'develop' && token) {
_this.globalData.token = token
_this.getUserInfo(token).then(res => {
_this.globalData.userInfo = res.data
if (_this.CallbackFn) {
console.log('CallbackFn')
// 如果有说明,onLoad中没有拿到值,把结果当参数再传入回调中
_this.CallbackFn(res);
}
})
} else {
//获取code和token
_this.getToken()
}
} else {
// 微信环境
console.log('从微信进入1')
wx.reLaunch({
url: '/pages/error/error',
})
}
}
})
},
//获取token
getToken() {
let _this = this
wx.showLoading({
title: '加载中...',
task: true
})
return new Promise((reslove, reject) => {
wx.qy.login({
success: function (res) {
// console.log('企业微信code==>',res.code)
wx.request({
url: _this.APIURL + '/index.php/oa/token/wxGetToken',
data: { code: res.code },
method: 'POST',
success(res) {
wx.hideLoading()
if (res.data.statusCode == 200) {
_this.globalData.token = res.data.data.token
//获取token成功,获取个人信息
_this.getUserInfo(res.data.data.token).then(res => {
_this.globalData.userInfo = res.data
// wx.showTabBar({
// animation:true //是否需要过渡动画
// })
// 此处判断app对象中有没有这个回调函数
console.log(88)
if (_this.CallbackFn) {
console.log('CallbackFn')
// 如果有说明,onLoad中没有拿到值,把结果当参数再传入回调中
_this.CallbackFn(res);
}
reslove()
})
} else {
//登录失败(弄个错误页面吧)
wx.reLaunch({
url: '/pages/error/error?flag=2&msg=' + res.data.msg,
})
}
},
fail(res) {
_this.tishi('网络连接失败')
}
})
}
})
})
},
// 获取个人信息
getUserInfo(token) {
console.log('aa')
let _this = this;
return new Promise((resolve, reject) => {
wx.request({
url: _this.APIURL + '/oa/shop_info/userInfo',
method: 'POST',
header: {
'Content-Type': 'application/json', 'token': token
},
success(res) {
if (res.statusCode == 200) {
if (res.data.statusCode == 9005) {
wx.reLaunch({
url: '/pages/error/error?flag=3&msg=' + res.data.msg
});
} else {
resolve(res.data);
}
} else {
_this.tishi(res.data.msg)
}
}
})
})
},
autoUpdate(){
if (wx.canIUse('getUpdateManager')) {
const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function (res) {
console.log('onCheckForUpdate====', res)
// 请求完新版本信息的回调
if (res.hasUpdate) {
console.log('res.hasUpdate====')
updateManager.onUpdateReady(function () {
wx.showModal({
title: '更新提示',
content: '新版本已经准备好,是否重启应用?',
success: function (res) {
console.log('success====', res)
// res: {errMsg: "showModal: ok", cancel: false, confirm: true}
if (res.confirm) {
// 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate()
}
}
})
})
updateManager.onUpdateFailed(function () {
// 新的版本下载失败
wx.showModal({
title: '已经有新版本了哟~',
content: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~'
})
})
}
})
}
},
//提示封装
tishi(msg) {
wx.showToast({
title: msg,
icon: 'none',
mask: true,
})
},
/**
* 定义全局变量
*/
globalData: {
userInfo: null,//rule_id 2筹开管理经理3筹建督导经理5筹建部负责人6筹建指导顾问7平台装饰公司8平台项目经理9装饰公司
token: null,
}
})
②、util.js
const app = getApp()
const baseURL = app.APIURL
/**
* GET请求封装
*/
function get(url, data = {}) {
return request(url, data, 'GET')
}
/**
* POST请求封装
*/
function post(url, data = {}) {
return request(url, data, 'POST')
}
/**
* 微信的request
*/
function request(url, data = {}, method = "GET") {
var contentType = 'application/json'
var token = app.globalData.token
// console.log(token);
return new Promise(function(resolve, reject) {
wx.request({
url: baseURL + url,
data: data,
method: method,
header: {
'Content-Type': contentType,'token':token
},
success: function(res) {
if (res.statusCode == 200) {
//请求正常200
if(res.data.statusCode == 9005){
wx.reLaunch({
url: '/pages/error/error?flag=3&msg='+res.data.msg
});
}else{
resolve(res.data);
}
}else {
//请求失败
reject("请求失败:" + res.statusCode)
}
},
fail: function(err) {
//服务器连接异常
reject("服务器连接异常,请检查网络再试")
}
})
});
}
function loginAgain(){
console.log('function loginAgain')
wx.getSystemInfo({
success (res) {
if(res.environment) {
// 企业微信环境
//获取code和token
app.getToken()
} else {
// 微信环境
wx.navigateTo({
url: '/pages/error/error',
})
}
}
})
}
module.exports = {
request,
get,
post
}
③、api.js
const util =require('./util')
module.exports = {
// //获取用户信息
getUserInfo: (data) => util.post('/oa/shop_info/userInfo',data),
//获取荣誉
getMyHonorList: (data) => util.post('/oa/mine/getMyHonorList',data),
//获取用户列表
userList: (data) => util.post('/oa/super_management/userList',data),
//切换用户
changeUser: (data) => util.post('/oa/super_management/changeUser',data),
};
④、封装完毕如何使用
const app = getApp();
const api =require('../../../utils/api');
api.managedStores().then(res =>{
console.log(res)
})
请求完毕处理数据
更多推荐
已为社区贡献3条内容
所有评论(0)