小程序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这个文件开始. 阅读过"微信小程序-代码构成" ...
随机推荐
- Spring中单例模式中的饿汉和懒汉以及Spring中的多例模式
链接:https://pan.baidu.com/s/1wgxnXnGbPdK1YaZvhO7PDQ 提取码:opjr 单例模式:每个bean定义只生成一个对象实例,每次getBean请求获得的都是此 ...
- spring cloud gateway自定义过滤器
在API网关spring cloud gateway和负载均衡框架ribbon实战文章中,主要实现网关与负载均衡等基本功能,详见代码.本节内容将继续围绕此代码展开,主要讲解spring cloud g ...
- [Web 前端] 023 js 的流程控制、循环和元素的获取、操作
1. Javascript 流程控制 用于"基于不同条件执行不同的动作"的场合 1.1 if 语句 三种形式 // 第一种 if... // 第二种 if... else ... ...
- 前端UI库推荐(pc和移动)
此推荐个人喜好,不喜勿喷. 1. pc 端 elementUI (生态强大,样式生硬) iview (推荐,组件丰富) bootStrap layUI easyUi 2. 移动端 mintUI ant ...
- java的idea项目文件夹合并,怎么分开
一,如下图所示 二,只需要将这个去掉
- C++------流星雨
用C++实现模拟数字.字母流星雨,其主要用到链表.win32编程基础. demo实例: // DataRainDemo.cpp : 定义应用程序的入口点. // #include "stda ...
- MySQL索引优化(索引三表优化案例)
建表SQL phone.book表建立索引 [关联优化查询建议] 1.保证被驱动表的join字段已经被索引 被驱动表 join 后的表为被驱动表 (需要被查询) 2.left join 时,选择小 ...
- netlink, PF_NETLINK - 内核与用户之间的通讯
SYNOPSIS 总揽 #include <asm/types.h> #include <sys/socket.h> #include <linux/netlink.h& ...
- 管线命令(Pipe)
管线命令接受|前面传来的stdout,管线示意图如下所示: 管线两个需要注意的地方: 1.管线仅会处理stdout,忽略对stderr的处理 2.管线必须接受前个指令的stdin才是 那么,如果我想接 ...
- PAT Basic 1046 划拳 (15 分)
划拳是古老中国酒文化的一个有趣的组成部分.酒桌上两人划拳的方法为:每人口中喊出一个数字,同时用手比划出一个数字.如果谁比划出的数字正好等于两人喊出的数字之和,谁就赢了,输家罚一杯酒.两人同赢或两人同输 ...