xml地图|网站地图|网站标签 [设为首页] [加入收藏]

存储及更新,微信小程序开发知识点总结

来源:http://www.ccidsi.com 作者:集成经验 人气:98 发布时间:2019-05-07
摘要:App({ globalData:{ userInfo:{}, postUrl: (wx.getExtConfigSync().request_url || '(后台接口地址)'), header: { 'content-type': 'application/x-www-form-urlencoded', 'Cookie': '' }, }, 1、写在日前的话 上一篇作品中,大家选
App({
  globalData:{
    userInfo:{},
    postUrl: (wx.getExtConfigSync().request_url || '(后台接口地址)'),
    header: {
      'content-type': 'application/x-www-form-urlencoded',
      'Cookie': ''
    },
  }, 

1、写在日前的话

上一篇作品中,大家选用 Node.js 成功的落到实处了连接微信公众平台功能。在那篇文章中,大家将贯彻微信公众平台1个分外重大的参数 access_token ,它是大众号的全局唯1接口调用凭据,公众号调用各接口时都需采用access_token。

在始发在此之前,让大家先按捺住本身感动的心思、调解好呼吸,因为大家要将上一篇小说的代码重新整理一下。三个好的类型结构,更能促进大家理清职业逻辑以及今后维护代码的简便。OK!

皇家88娱乐平台 1

Are you ready?

七.谈到底正是有关第1方库的选拔了

开采进程中须要运用汉兰达SA加密。笔者在微信小程序中引入了笔者们线上项指标KugaSA加密算法源文件。可是却不可以符合规律运行。尝试创建测试的html页面插足该加密算法文件。代码能够平常运作。使用node test.js
运营js文件也可以健康运转。但在微信小程序中正是不可能寻常运作。

开销了差不多有二个多钟头的时候后照旧找到了难点的原由。难点的原由也异常粗略:微信小程序会把js文件暗中同意遵照"use strict" 运维。而PRADOSA加密算法的源文件并从未利用"use strict"。

看上边包车型客车两段代码,要是不加尾部的"use strict"注明。两段代码都以足以健康运营。若是运转在"use strict"
的宣示下就能够报错。之所以花了很短日子消除这些标题,相当于来看这么的谬误的时候,根本就从不往那上头思索,因为她俩看起来的确是符合规律的。

"use strict"for(i=0;i<10;i  ){//i is not defined //....}for(var i=0;i<10;i  ){ //....}

 

二、整理项目结构

1.展开大家的种类,并在项目中加多文件夹,命名字为 wechat ,如图:

皇家88娱乐平台 2

此处写图片描述

2.在 wechat 文件夹中加多文件并取名称为 wechat.js。wechat.js 主要用来封装开辟微信公众平台的富有办法。首先大家构建这几个模块的协会,代码如下:

'use strict' //设置为严格模式

//构建 WeChat 对象 即 js中 函数就是对象
var WeChat = function(config){
    //设置 WeChat 对象属性 config
    this.config = config;

    //设置 WeChat 对象属性 token
    this.token = config.token;
}

//暴露可供外部访问的接口
module.exports = WeChat;

阴毒形式:是在 ECMAScript 伍 中引进的定义。严谨方式是为 Javascript 定义了壹种分析与执行模型。

module.exports :揭穿接口用于外部操作。实际上大家定义模块后,使用 node.js 的 require 引用时,node.js 会自动在大家定义的模块外层参加以下代码

/**
 * exports  module.exports 的一个简短的引用
 * require  用于引入模块
 * module   当前模块的引用
 * __filename  当前模块的文件名
 * __dirname   当前模块的目录名
 */
(function (exports, require, module, __filename, __dirname) {
    //自定义模块的代码块
})();

相信对于有过 javascript 开辟经历的同窗,上面的代码并不生分。我们得以将它掌握为贰个闭包,是2个无名氏格局的调用,防止污染全局变量。

小知识:

在地点的代码中,除了大家所采用的 module.exports 对象,还有另1个用来暴光接口的 变量 exports (官方文书档案将 module.exports 称为对象,exports 称为 属性,笔者在那边也就那样称呼了),那么 module.exports 与 exports 有哪些分别呢?

module.exports 对象是由模块系统制造的,exports 变量是在模块的公文等级成效域内立见效率的,它在模块被实行前被赋于 module.exports 的值。——源点Node.js官方文书档案

也正是说 exports 是 module.exports 的引用,而 module.exports 才是真正用于暴光接口的靶子。 exports 赋值的兼具属性与措施都赋值给了 module.exports 对象。

若果 module.exports 与 exports 将值赋值给了一如在此之前的天性,则根据赋值的先后顺序,取最终一个赋值;要是大家给 module.exports 赋值的是三个目的,则会覆盖 exports 的持有办法与特性。

故此大家在爆出接口的施用上,假设只是单一属性或措施的话,建议使用exports.属性/方法,要是导出八个特性或艺术或利用对象构造方法,建议选拔module.exports。

切切实实详解能够点击查阅该小说 -> Module.exports和exports的区别

3.为 WeChat 对象加多二个措施 auth,并将 app.js 中的验证办法粘贴进去

'use strict' //设置为严格模式

const crypto = require('crypto'); //引入加密模块

//构建 WeChat 对象 即 js中 函数就是对象
var WeChat = function(config){
    //设置 WeChat 对象属性 config
    this.config = config;

    //设置 WeChat 对象属性 token
    this.token = config.token;
}

/**
 * 微信接入验证
 */
WeChat.prototype.auth = function(req,res){
     //1.获取微信服务器Get请求的参数 signature、timestamp、nonce、echostr
        var signature = req.query.signature,//微信加密签名
            timestamp = req.query.timestamp,//时间戳
                nonce = req.query.nonce,//随机数
            echostr = req.query.echostr;//随机字符串

        //2.将token、timestamp、nonce三个参数进行字典序排序
        var array = [this.token,timestamp,nonce];
        array.sort();

        //3.将三个参数字符串拼接成一个字符串进行sha1加密
        var tempStr = array.join('');
        const hashCode = crypto.createHash('sha1'); //创建加密类型 
        var resultCode = hashCode.update(tempStr,'utf8').digest('hex'); //对传入的字符串进行加密

        //4.开发者获得加密后的字符串可与signature对比,标识该请求来源于微信
        if(resultCode === signature){
            res.send(echostr);
        }else{
            res.send('mismatch');
        }
}

//暴露可供外部访问的接口
module.exports = WeChat;

四.整理 app.js 文件的中的代码,如下:

const express = require('express'), //express 框架 
      wechat  = require('./wechat/wechat'), 
       config = require('./config');//引入配置文件

var app = express();//实例express框架

var wechatApp = new wechat(config); //实例wechat 模块

//用于处理所有进入 3000 端口 get 的连接请求
app.get('/',function(req,res){
    wechatApp.auth(req,res);
});

//监听3000端口
app.listen(3000);

哦!那样代码望着是否欣欣自得多了啊。

皇家88娱乐平台 3

机敏如小编

剩余的正是去微信公众平台对接验证了,在上壹篇文章中有详细的学科,这里本人就不再演示了

皇家88娱乐平台 4

便是那般懒

陆.mock.js能或不能够在微信小程序中应用

mock.js因为能够阻止ajax请求,然后再次回到特定格式的数码。而被大规模的行使于前后端分离的开销格局中。那么在微信小程中是还是不是足以使用mock.js呢?

答案是不是认的。因为微信小程序中的全体接口请求都不可能不透过客户端转载并不是原生的ajax请求。不过能够依附mock.js的牵挂封装一个基于特定的url再次回到特定数据的主意。在config.js中配备变量DEBUG是还是不是打开调节和测试方式。然后再apiAjax.js中配置,如下图

import * as Mock from '../mock/mock';const apiAjax = (api, dataMethod, method = 'POST', fnSucc, thisData) => { if (!DEBUG) { wxRequestApi(api, dataMethod, method = 'POST', fnSucc, thisData); } else { /** * 模拟数据可以在这里配置switch 的方式 * case 的条件判断语句即为要请求的接口 */ switch (api) { case hostName   '/wp/api/security/getphonestatus': fnSucc(Mock.testApi(api), thisData); break; default: wxRequestApi(api, dataMethod, method = 'POST', fnSucc, thisData); } }}

有着有关特定接口的归来数据都以在mock/mock.js中开始展览配备,配置方式得以参考布局示范:

/** * 测试接口返回数据样式 * * @returns */const testApi = ()=>{ return { a:1, b:2 }}/** * 这里导出相应模拟数据的函数名 */export { testApi}

app.js

三、access_token的获得、存款和储蓄及更新

1.微信文书档案步骤

在起首码代码在此之前,大家依然是先理清达成的思绪,在开头编写制定完成代码。展开 微信补助文书档案 ,点击左侧菜单中的早先支付,点击其子菜单获取access_token,如图:

皇家88娱乐平台 5

获取access_token

皇家88娱乐平台 6

获取access_token 帮忙文书档案

透过下边的 API 的讲述,我们总括出以下步骤:

  1. 实现 https Get 请求
  2. 获取 access_token 并存储 如果 当前 access_token 过期则更新

2.access_token的获取、存款和储蓄及创新 代码完成

收十好思路后我们就依照上一节的手续去贯彻。通过援助文书档案我们将用以请求微信API 的伸手地址与参数,存放到 config.json 文件。

里面 appid 与 secret 多个参数 位于 微信公众平台 左边菜单的着力配置中,如图:

皇家88娱乐平台 7

微信公众平台 - 基本配备

皇家88娱乐平台 8

APPID 与 AppSecret

开辟者密码 点击复位,用手提式有线电话机微信扫面二维码后便可获取。config.json 代码如下

{
    "token":"wechat",
    "appID":"wx154f********764da",
    "appScrect":"59de4266*******8dbe9de4b798cd372",
    "apiDomain":"https://api.weixin.qq.com/",
    "apiURL":{
        "accessTokenApi":"%scgi-bin/token?grant_type=client_credential&appid=%s&secret=%s"
    }
}

鉴于微信 API 请求连接的域名是公用的,我们将它提议来,在伸手地址中选取%s(字符串) 占位符占位。

微信全体请求连接都是 https 协议,很幸运的是 Node.js 系统包中为大家提供了 https 的包,由于后边的请求会频仍用到 https ,由此我们将它包裹为二个公用的办法,以便以往的使用,再度展开 wechat.js 在构造方法中,引进 https 模块,并在构造函数内部增加 requestGet 方法

//用于处理 https Get请求方法
    this.requestGet = function(url){
        return new Promise(function(resolve,reject){
            https.get(url,function(res){
                var buffer = [],result = "";
                //监听 data 事件
                res.on('data',function(data){
                    buffer.push(data);
                });
                //监听 数据传输完成事件
                res.on('end',function(){
                    result = Buffer.concat(buffer,buffer.length).toString('utf-8');
                    //将最后结果返回
                    resolve(result);
                });
            }).on('error',function(err){
                reject(err);
            });
        });
    }

提示:

npm 提供了成千上万用于请求的工具包,举例 request ( 安装命令 npm install request ) 等。这里本人只是用系统包去做请求管理。

是因为 https 是异步请求的,笔者在这当中使用了 ES陆 的 Promise 对象 。

完了了 requestGet方法后,我们的第贰步骤也就实现了。上面初叶第三步,获取 access_token 并存储 如果 当前 access_token 过期则更新。

在那前面小编是想将 access_token 的累积地方照样位居 config.json 文件中,由于 access_token 在立异后 供给将文件重写,或者轻便导致 config.json 文件的格式的混杂,由此在 wechat 中再一次成立一个accessToken.json 文件用于存储 access_token

皇家88娱乐平台 9

此处写图片描述

{
    "access_token":"",
    "expires_time":0
}

其中 access_token 用于存款和储蓄 我们 GET 请求后access_token 的值,expires_time 用于存款和储蓄 access_token 的晚点时间,保存为时间戳。

在 wechat.js 引进 fs 模块用于操作文件、util 工具模块用于拍卖占位符、 accessToken.json 文件

'use strict' //设置为严格模式

const crypto = require('crypto'), //引入加密模块
       https = require('https'), //引入 htts 模块
        util = require('util'), //引入 util 工具包
accessTokenJson = require('./access_token'); //引入本地存储的 access_token

//构建 WeChat 对象 即 js中 函数就是对象
var WeChat = function(config){
    //设置 WeChat 对象属性 config
    this.config = config;
    //设置 WeChat 对象属性 token
    this.token = config.token;
    //设置 WeChat 对象属性 appID
    this.appID = config.appID;
    //设置 WeChat 对象属性 appScrect
    this.appScrect = config.appScrect;
    //设置 WeChat 对象属性 apiDomain
    this.apiDomain = config.apiDomain;
    //设置 WeChat 对象属性 apiURL
    this.apiDomain = config.apiURL;

    //用于处理 https Get请求方法
    this.requestGet = function(url){
        return new Promise(function(resolve,reject){
            https.get(url,function(res){
                var buffer = [],result = "";
                //监听 data 事件
                res.on('data',function(data){
                    buffer.push(data);
                });
                //监听 数据传输完成事件
                res.on('end',function(){
                    result = Buffer.concat(buffer,buffer.length).toString('utf-8');
                    //将最后结果返回
                    resolve(result);
                });
            }).on('error',function(err){
                reject(err);
            });
        });
    }
}

在 wechat.js 加多获得 access_token 的方法 getAccessToken

/**
 * 获取微信 access_token
 */
WeChat.prototype.getAccessToken = function(){
    var that = this;
    return new Promise(function(resolve,reject){
        //获取当前时间 
        var currentTime = new Date().getTime();
        //格式化请求地址
        var url = util.format(that.apiURL.accessTokenApi,that.apiDomain,that.appID,that.appScrect);
        //判断 本地存储的 access_token 是否有效
        if(accessTokenJson.access_token === "" || accessTokenJson.expires_time < currentTime){
            that.requestGet(url).then(function(data){
                var result = JSON.parse(data); 
                if(data.indexOf("errcode") < 0){
                    accessTokenJson.access_token = result.access_token;
                    accessTokenJson.expires_time = new Date().getTime()   (parseInt(result.expires_in) - 200) * 1000;
                    //更新本地存储的
                    fs.writeFile('./wechat/access_token.json',JSON.stringify(accessTokenJson));
                    //将获取后的 access_token 返回
                    resolve(accessTokenJson.access_token);
                }else{
                    //将错误返回
                    resolve(result);
                } 
            });
        }else{
            //将本地存储的 access_token 返回
            resolve(accessTokenJson.access_token);  
        }
    });
}

在 app.js 中增添新的监听链接用于测试 我们收获的token

//用于请求获取 access_token
app.get('/getAccessToken',function(req,res){
    wechatApp.getAccessToken().then(function(data){
        res.send(data);
    });    
});

皇家88娱乐平台 10

获取access_token的效果图

如此大家就大功告成了!

皇家88娱乐平台 11

小伙恭喜您

皇家88娱乐平台,文章源代码:https://github.com/SilenceHVK/wechatByNode 。对作品有不准确之处,请予以纠正。github源代码请顺手给个 Star,最后谢谢您的开卷。

2.关于toast

唤醒微信小程序的 API 私下认可是帮助toast的。 然则wx.showToast(OBJECT)方法的弹层却是默许带有1个icon。只可以够安顿success和loading二种方法。在大家的项目中不实用。所以在我们的品种中央银行使自定义的章程。使用办法:在需求选择toast的wxml中增多上边一段代码(因为是fixed定位能够献身放肆地方,一般位于页面最尾巴部分):

<view style="display:{{toast?'block':''}}" class="bd-toast">{{toasttxt}}</view>

在相应的.js文件中经过import的办法引进toast方法

import { toastFn } from '../../utils/toastFn';

在急需弹层的地方直接调用就能够了

/** *@ _this 指向当前的page对象 *@text toas中显示的文案 */toastFn(_this,[text]);

任何页面引用封装请求,比如 index.js

4.config.js

布置文件的施用
为了有利于线下联调剂测试。把正视碰到的项通过配备文件的办法管理起来。在急需的地方一贯import
来引用。假如急需上线的话只要求在那二个文书中开发相应的注脚和停业相应的笺注就足以了。

//qatestc测试环境域名export const hostName='https://wappass.qatest.baidu.com/';//线上环境域名// export let hostName='https://wappass.baidu.com/';//产品线配置验证成功后跳转的urlexport const jumpProductUrl = '/testsuccess/testsuccess';//产品线配置的tplexport const tpl = 'waimai';//是否开启debug模式export const DEBUG=false;

譬如接口的请求都以透过以下的办法来写,达到统壹保管测试情状和线上蒙受的目标:

import {hostName} from '../config';wx.request({ //接口请求 url: hostName 'wp/api/security/checkvcode', data: { verifycode: vcode, codestring: _this.data.imgcode }, method: 'GET', header: { 'content-type': 'application/x-www-form-urlencoded' }, success: function (res) { } })

本文由68399皇家赌场发布于集成经验,转载请注明出处:存储及更新,微信小程序开发知识点总结

关键词: 68399皇家赌场 Web前端之路

最火资讯