小程序app.js小结
小程序app.js
app.js
import {
ApiUrl
} from 'utils/apiurl.js';
import {
httpReq
} from 'utils/http.js';
/*以上两个文件为封装的请求数据的接口,文件内容我会放在最后,不用这俩文件的可以安装wx.request(微信开发文档提供方法来请求),这两个文件也是在原方法上做了改动但效果一样的,
*/
App({
onLaunch: function () {
var logs = wx.getStorageSync('logs') || []//
logs.unshift(Date.now())
/*unshift() 方法将把它的参数插入 arrayObject 的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间。该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新的元素 1,以此类推。
*/
wx.setStorageSync('logs', logs)// 根据时间存储log
// 登录
wx.login({
success: res => {
/* 发送 res.code 到后台换取 token,openId, sessionKey, unionId(都可以获取,和后端商议选择其中需要的获取并使用)
*/
if(res.code) {
//发起网络请求
httpReq({
header: {
//此处为示例header内容,写自己项目的即可
'Content-Type': 'application/json',
'Accept': 'application/json'
},
method: 'GET',
/* url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxf7a9fda47682a9a6&secret=cc74bba5adfa5e077038c5cb8baca13c&js_code='+ res.code+'&grant_type=authorization_code'
*/
url: ApiUrl.phplist + 'index/gettoken?code=' + res.code,
/*上面第一个url为前端直接绕过后端去微信请求拿到openid和session_key,主要是当时拿不到数据和后端争论故自己直接拿证明自己前端没有错,你们还是正常用下面的后端请求到的就可以了。
*/
}).then((res) =>{
wx.setStorageSync(res.data.lists.token)
/*此处后端要求我们拿token在其他页面使用说是为了安全,他的意思是说我刚刚自己绕过他去微信那边直接拿了openid和session_key不安全,我?????,只能现在按他的做了,其他页面需要openid时再传给他token换取。
*/
})
} else {
console.log('登录失败' + res.errMsg)
}
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
this.globalData.userInfo = res.userInfo
/*此处是可以直接获取到你微信个人账号信息的,就是图像,昵称,性别,省份,城市等之类的,如果是电话,具体地址等私密信息是要额外授权才能获取的,由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回.
所以此处加入 callback 以防止这种情况*/
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
},
fail: function(res) {}
})
} else {
wx.showModal({
title: '警告通知',
content: '您点击了拒绝授权,将无法正常显示个人信息,在设置中确定重新获取授权。',
})
}
},
fail: function(res) {}
})
},
globalData: {
userInfo: null,
}
})
apiurl.js
let ApiUrl = {};
// php列表
ApiUrl.phplist = 'http://www.ylb.com/api/';
// 详细信息
ApiUrl.detail = ApiUrl.phplist+'/';
export {ApiUrl};
http.js
function httpReq(params = {}){
let url = params.url || 'http://www.ylb.com';
let data = params.data || '';
let header = params.header || {};
let method = params.method || 'GET';
// 使用Promise来解决异步问题
return new Promise((resolve, reject) => {
// 发起网络请求
wx.request({
url,
data,
header,
method,
// 成功
success: resolve,
// 失败
fail: reject
})
})
}
// 导出模块
export {httpReq};
以上仅为小女子做项目时的一些理解与记录,初次接触小程序,仅供大家参考,欢迎各位大佬指正,代码各种问题都可以留言联系我,你主动,我们才有故事。
小程序app.js小结的更多相关文章
- 微信小程序~App.js中登录
(1)初始化项目中App.js登录代码 // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, u ...
- 微信小程序app.js中设置公有变量
初始化GlobalData 在App.js的最上方可以设置GlobalData的初始值. App({ globalData:{ appid: '1wqas2342dasaqwe232342xxxxxx ...
- 小程序App.js 传递数据给实例(app异步数据问题)
在最开始初始化的时候,都会触发app.js 这个里面的onload生命方法, 在这个方法里面我们可以获取之前的存储数据/异步请求等等操作, 但是这些操作一般都是需要稍许时间.也就是说在其他界面加载结束 ...
- 微信小程序 --- app.js文件
app.js文件是项目的入口文件: //app.js App({ onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('l ...
- 微信小程序~App.js中获取用户信息
(1)代码:主要介绍下获取用户信息部分 onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] l ...
- 微信小程序 app.js globalData 赋值报错
//success方法要用用success: res => {}的格式 success: res => { } //赋值报错 success:function(e){ } //报错内容: ...
- 在微信小程序的JS脚本中使用Promise来优化函数处理
在我们传统的Javascript开发函数编写中,我们习惯了回调函数的处理,不过随着回调函数的增多,以及异步处理的复杂性等原因,代码越来越难读,因此诞生了使用Promise来优化JS函数处理的需求,引入 ...
- 微信小程序APP生命周期
小程序APP生命周期需要先从app.js这个文件开始,App() 必须在 app.js 中调用,必须调用且只能调用一次,app.js中定义了一些应用的生命周期函数 onLaunch----当小程序初始 ...
- 微信小程序-APP生命周期与运行机制
QQ讨论群:785071190 开发微信小程序之前需要先了解微信小程序运行机制以及其生命周期,小程序APP生命周期需要先从app.js这个文件开始. 阅读过"微信小程序-代码构成" ...
随机推荐
- 多线程14-Barrier
, b => Console.WriteLine()); ; i <= ; i++) { Console.Write ...
- Nginx服务器优势是什么
nginx介绍.功能,优势 https://www.cnblogs.com/wcwnina/p/8728391.html#!comments Nginx负载均衡,session共享问题,几种解决方案 ...
- spring扩展点之PropertyPlaceholderConfigurer
原理机制讲解 https://leokongwq.github.io/2016/12/28/spring-PropertyPlaceholderConfigurer.html 使用时多个配置讲解 ht ...
- 细说SQL Server数据类型
1.字符型 char 定长,查询速度快,最大8000字符(非unicode编码) ) '小明' 前四个字符存放‘小明’,后添6个空格补全 varchar 变长,最大8000字符(非unicode编码) ...
- Vue切换页面时中断axios请求
一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能,并且可能对现在页 ...
- Solr安装(单机版)
本文记录的是solr在win下安装配置使用的过程,最后将solr部署到Linux上通过远程访问.下一篇文章会介绍 solr集群搭建(SolrCloud) 的安装! Solr是基于Lucene ...
- 解决HTML乱码
转自:https://blog.csdn.net/yuxisanno139/article/details/80675426
- 基于Nginx+nginx-rtmp-module+ffmpeg搭建rtmp、hls流媒体服务器
上篇文章是基于Red5与ffmpeg实现rtmp处理NVR或摄像头的监控视频处理方案,有兴趣的朋友可以查看. Nginx及nginx-rtmp-module安装 新建目录 mkdir /usr/loc ...
- 算法trick
数组从头到尾的循环遍历: index=(index+1)%length 索引值增加定长,对长度取余,则形成头尾循环.
- Linux之目录与路径
特殊的目录: “.”,代表此层目录 “..”,代表上一层目录 “-”,代表前一个工作目录 “~”,代表“目前用户身份”所在的主文件夹 “~account”,代表account这个用户的主文件夹(acc ...