微信小程序开发从0到1【原生开发者工具开发】【3】

122 阅读3分钟

头像.png 一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第3天,点击查看活动详情

🍋欢迎关注 🍋[微信小程序开发从0到1] 🍋共同努力

一 、 前言

  1. 封装 微信的 request
  2. 封装 小程序更新
  3. 封装 小程序分享

二、 微信的request

因为后台开发没用token所以封装时没加上token。我这边就讲解一下 。 'content-type': 'application/json' 是默认值 但是有时后台需要是form表单 'content-type': 'application/x-www-form-urlencoded', 'Authorization': '这里可以添加token

/**
 *  封装 微信的 request
 */

function request(url, data = {}, method = "GET") {
  return new Promise(function (resolve, reject) {
      wx.request({
        url: url,
        data: data,
        method: method,
        header: {
          'content-type': 'application/x-www-form-urlencoded',
          'Accept-Language': 'zh-cn,zh;q=0.5' // 'Authorization': 'Bearer ' + getDataByKey('token')  自己封装的方法
        },
        success: function (res) {
          if (res.data.code == 200 || res.statusCode == 200) {
            resolve(res);
          } else {
            reject(res);
          }
        },
      });
  });
}

/**
 *  get  post  请求
 */

function get(url, data, isLogin) {
  return request(url, data, "GET", isLogin);
}

function post(url, data = {}) {
  return request(url, data, "POST");
}

module.exports = {
  get,
  post,
  request,
};

三、 小程序更新

在app.js onLaunch(){ this.autoUpdate()} 小程序初始化完成时触发,全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取. wx.canIUse(string schema)判断小程序的API,回调,参数,组件等是否在当前版本可用. wx.getUpdateManager()获取全局唯一的版本更新管理器,用于管理小程序更新。关于小程序的更新机制,可以查看运行机制文档

autoUpdate: function () {
    var self = this;
    // 获取小程序更新机制兼容
    if (wx.canIUse("getUpdateManager")) {
      const updateManager = wx.getUpdateManager();
      //1. 检查小程序是否有新版本发布
      updateManager.onCheckForUpdate(function (res) {
        // 请求完新版本信息的回调
        if (res.hasUpdate) {
          //2. 小程序有新版本,则静默下载新版本,做好更新准备
          updateManager.onUpdateReady(function () {
            console.log(new Date());
            wx.showModal({
              title: "更新提示",
              content: "新版本已经准备好,是否重启应用?",
              success: function (res) {
                if (res.confirm) {
                  //3. 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
                  updateManager.applyUpdate();
                } else if (res.cancel) {
                  //如果需要强制更新,则给出二次弹窗,如果不需要,则这里的代码都可以删掉了
                  wx.showModal({
                    title: "温馨提示~",
                    content: "本次版本更新涉及到新的功能添加,旧版本无法正常访问的哦~",
                    success: function (res) {
                      self.autoUpdate();
                      return;
                    },
                  });
                }
              },
            });
          });
          updateManager.onUpdateFailed(function () {
            // 新的版本下载失败
            wx.showModal({
              title: "已经有新版本了哟~",
              content: "新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~",
            });
          });
        }
      });
    } else {
      // 如果希望用户在最新版本的客户端上体验您的小程序,可以这样子提示
      wx.showModal({
        title: "提示",
        content: "当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。",
      });
    }
      },

四、小程序分享

根据自家产品需求所有页面都需要分享。这里就直接封装到app.js文件里面。 这里重点说一下 getCurrentPages()后面会大量用到这个api 获取页面栈 返回之间的页面

     let pages = getCurrentPages(), //获取当前页面pages里的所有信息。
    const view = pages[pages.length - 2], //view 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面,-3是上上个页面以此类推。

这里的view 就是上个页面的 this A页面跳转到B页面 B页面做出改变导致A页面的数据发生改变 就可以view.setData({'去改变A页面的值'})或者去调用A页面的方法去更新那个值。

 overShare: function () {
    let that = this
    //监听路由切换
    //间接实现全局设置分享内容
    wx.onAppRoute(function (res) {
      //获取加载的页面
      let pages = getCurrentPages(),
        //获取当前页面的对象
        const view = pages[pages.length - 1],
        const data = null
      let isShare = ['subpkg/auction-detail/auction-detail']
      if (view.route.includes(isShare)) return
      if (view) {
        data = view.data;
        console.log("是否重写分享方法", data.isOverShare);
        if (!data.isOverShare) {
          data.isOverShare = true;
          view.onShareAppMessage = function () {
            //你的分享配置
            return {
              title: '快来和我一起加入群票吧!',
              path: "/pages/auction-items/auction-items?phone=" + that.globalData.userInfo.utel,
              imageUrl: "/static/images/geren.png"
            };
          };
        }
      }
    });
  },

五、总结

这篇文章主要就是一些封装,后面根据这篇文章在进行引用,说一下页面栈的东西。