⼩程序--封装公共js⽅法以及组件化
⼩程序知识点总结:
⼩程序的代码结构与vue的代码结构相近，所以我们在构建⼩程序的时候尽可能的去将⼀些公共的⽅法单独⽤js进⾏封装. 1：⼩程序 App.js 是⼊⼝的js也是全局的js
//app.js
var util =require('./utils/util.js');
var api =require('/pages/config/api.js');
var user =require('./utils/use.js');
App({
onLaunch:function(options){
// 展⽰本地存储能⼒
const updateManager = wx.getUpdateManager();
wx.showModal({
title:'更新提⽰',
content:'新版本已经准备好，是否重启应⽤？',
success:function(res){
firm){
// 新的版本已经下载好，调⽤ applyUpdate 应⽤新版本并重启
updateManager.applyUpdate()
}
}
})
})
},
onShow:function(options){
user.checkLogin().then(res =>{
this.globalData.hasLogin =true;
}).catch(()=>{
this.globalData.hasLogin =false;
});
},
globalData:{
hasLogin:false,
share:false,// 分享默认为false
//获取设备顶部窗⼝的⾼度（不同设备窗⼝⾼度不⼀样，根据这个来设置⾃定义导航栏的⾼度）//这个最初我是在组件中获取，但是出现了⼀个问题，当第⼀次进⼊⼩程序时导航栏会把
//页⾯内容盖住⼀部分，当打开调试重新进⼊时就没有问题，这个问题弄得我是莫名其妙
//虽然最后解决了，但是花费了不少时间
statusBarHeight: wx.getSystemInfoSync()['statusBarHeight']
}
})
可以根据 wx.getSystemInfoSync来获取设备窗⼝的⾼度如下图
2: ⼩程序 公共js的封装
我们在构建项⽬的时候有很多可以复⽤的⽅法.⽐如：请求⽅法/验证⽅法/登录⽅法/放置缓存的⽅法
在写之前我们了解⼀下⼩程序
Promise ，简单说就是⼀个容器，⾥⾯保存着某个未来才会结束的事件（通常是⼀个异步操作）的结果。从语法上说，Promise 是⼀个对象，从它可以获取异步操作的消息
对象的状态不受外界影响。Promise对象代表⼀个异步操作，有三种状态：pending（进⾏中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪⼀种状态，任何其他操作都⽆法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表⽰其他⼿段⽆法改变。
⽤法:
ES6 规定，Promise对象是⼀个构造函数，⽤来⽣成Promise实例。
下⾯代码创造了⼀个Promise实例。
const promise =new Promise(function(resolve, reject){
// ... some code
if(/* 异步操作成功 */){
resolve(value);
}else{
reject(error);
}
});
Promise构造函数接受⼀个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不⽤⾃⼰部署。
resolve函数的作⽤是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调⽤，并将异步操作的结果，作为参数传递出去；reject函数的作⽤是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为rejected），在异步操作失败时调⽤，并将异步操作报出的错误，作为参数传递出去。
Promise实例⽣成以后，可以⽤then⽅法分别指定resolved状态和rejected状态的回调函数。
promise.then(function(value){
// success
},function(error){
// failure
});
then⽅法可以接受两个回调函数作为参数。第⼀个回调函数是Promise对象的状态变为resolved时调⽤，第⼆个回调函数是Promise对象的状态变为rejected时调⽤。其中，第⼆个函数是可选的，不⼀定要提供。这两个函数都接受Promise对象传出的值作为参数。
接下书写公共js⽅法 user.js
/**
* ⽤户的相关服务
*/
const util =require('../utils/util.js');
const api =require('../pages/config/api.js')
/**
* promissin 检测 session_key 是否失效
*/
function checkSessoin(){
// 使⽤Promise 构造函数
return new Promise(function(resplve, reject){
// ⽤来检测⽤户登录是否失效
wx.checkSession({
success:function(){
resolve(true);
},
fail:function(){
reject(false);
}
})
})
}
/**
* Promise封装wx.login
*/
function login(){
return new Promise(function(resolve, reject){
wx.login({
success:function(res){
de){
resolve(res);
}else{
reject(res);
}
},
fail:function(err){
reject(err);
}
});
});
}
/**
如何下载javascript* 调⽤登录
* 调⽤登录
*/
function loginByWeixin(userInfo){
return new Promise(function(resolve, reject){
return login().then((res)=>{
//登录远程服务器
code: de,
userInfo: userInfo
},'POST').then(res =>{
===0){
//存储⽤户信息
wx.setStorageSync('userInfo', res.data.userInfo);
wx.setStorageSync('token', ken);
resolve(res);
}else{
reject(res);
}
}).catch((err)=>{
reject(err);
});
}).catch((err)=>{
reject(err);
})
});
}
/**
* 判断⽤户是否登录
*/
function checkLogin(){
return new Promise(function(resolve, reject){
StorageSync('userInfo')&& wx.getStorageSync('token')){ checkSession().then(()=>{
resolve(true);
}).catch(()=>{
reject(false);
});
}else{
reject(false);
}
})
}
// 开放出去
loginByWeixin,
checkLogin,
login
}
config.js — > 装载请求后台的接⼝
// 服务器地址
//var WxApiURL = 'localhost:8020/'
var WxApiURL ='127.0.0.1:8020//'
// 装载请求服务器的地址
WxRegist: WxApiURL +'regist',
wxDeviceWarning: WxApiURL +'warning/page'//告警列表
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。