国产亚洲精品资源在线26u

      
      
      <th id="ljgpb"><pre id="ljgpb"><sup id="ljgpb"></sup></pre></th>

      <rp id="ljgpb"></rp>

      您現在的位置: 微信小程序 > 微信小程序運營 > 經驗 >

      寫微信小程序這一個月

      來源:微信小程序 編輯:Yiyongtong.com 發布時間:2020-05-18 10:54熱度:

       

      最近在做一個微信小程序的項目,遇到了不少坑,不得不說微信小程序的官方文檔寫的真的不怎么樣,一開始技術選型的時候也有考慮過第三方框架,mpvue,uniapp等,但是最后考慮了下,還是先了解一下原生小程序比較好,我始終認為一開始就上第三方框架并不是很好。

      下面我總結了一些坑點和開發過程中容易遇到的問題。

      wxss or less

       

      對于寫慣了less的開發來書,寫wxss實在是效率低下,太煎熬了,對此可以使用vscode插件 easy-less 來解決,我是用vscode來寫代碼,微信開發工具只作預覽。

      網絡請求

       

      wx.request是小程序的網絡請求方法,默認情況下,我們希望success是在服務器響應的狀態碼在2xx的時候觸發,實際上不是,只要網絡請求成功發出了,success方法就會觸發,比如500狀態碼也會觸發success,所以fail也只在網絡請求沒有發出的情況下觸發,所以你必須在success重復寫判斷邏輯,而且也不能用promise,所以有必要封裝一下

      // 封裝前
      wx.request({
        url: 'test.php', //僅為示例,并非真實的接口地址
        data: {
          x: '',
          y: ''
        },
        header: {
          'content-type': 'application/json' // 默認值
        },
        success (res) {
          // 假設服務器的響應體是{success: true, data: 123}
          if (res.statusCode === 2xx) {
              fn(res.data.data)
          } else {
              wx.showToast({            icon: 'none',            title: res.data.message || '網絡異常',            duration: 1500        })
          }
        },
        fail (res) {
          console.log(res);
        }
      })
      
      // 封裝后
      // request.js
      module.exports = function ({url, data, method}) {    const app = getApp();    return new Promise((resolve, reject) => {        wx.request({            method: method,            url: `${app.globalData.apiUrl}/${url}`,            data: data,            header: {                token: app.globalData.token            },            success: function (res) {                if (res.statusCode === 200) {                    const data = res.data.data;                    resolve(data);                } else if (res.statusCode === 401) {
                          // 登錄失效,包含業務邏輯,根據需求添加
                          wx.setStorageSync('token', null); // 清除token                                        app.globalData.token = null;                    wx.setStorageSync('userInfo', {}); // 清除用戶數據                    app.globalData.userInfo = {};                    wx.switchTab({                        url: '/pages/user/user'                    });                    reject(res.data);                } else if (res.statusCode >= 500) {                    wx.showToast({                        icon: 'none',                        title: res.data.message || '網絡異常',                        duration: 1500                    });                    reject(res.data);                }            },            fail: function () {                wx.showToast({                    icon: 'none',                    title: '網絡異常',                    duration: 1500                });            }        });    })}
      
      // app.js
      const request = require('./utils/request.js');App({    onLaunch: function () {        this.request = request;    },    globalData: {        token: wx.getStorageSync('token'),        userInfo: wx.getStorageSync('userInfo'),        apiUrl: 'http://localhost:3300/api/'            }})// index.js
      const app = getApp();app.request({
         method: 'GET',   url: '/test'}).then(res => {    // do something});復制代碼

      Promise finally

       

      因為在某些接口請求前會加loading,防止多次點擊,然后在接口的finally中取消loading即可,在開發工具中,一切正常,但是一到真機調試就會報錯,查閱資料發現微信小程序不支持promise finally,太坑了,只能加個 polyfill 

      canvas繪圖

       

      小程序一般都會有分享圖片的需求,圖片一般都帶用戶信息和小程序碼,這時候就要用到canvas,而原生的canvas是如此難用和坑,所以想使用三方庫,一開始試了html2canvas,

      html2canvas

      它確實很強大,可以直接獲取dom繪制,但是微信小程序無法獲取dom,引入之后直接報錯,thirdScriptError Cannot read property 'document' of undefined TypeError: Cannot read property 'document' of undefined

      html2canvas(document.body).then(function(canvas) {
          document.body.appendChild(canvas);
      });復制代碼

      Painter

      painter可以使用json數據描述繪圖,不用繁瑣操作canvas的一大坨函數,方便很多,基本能滿足需求了。中間遇到一個小問題,開發工具里,繪圖后保存到相冊是有頭像的,但是發小程序正式包后,真機操作時,繪圖的頭像就會丟失,一開始以為是painter的兼容問題,后來才發現是因為開發工具是開啟了不校驗合法域名的,但是線上包會校驗合法域名,天真的以為微信自己的頭像域名不用添加,結果并不是,微信連自己都不放過,在微信小程序后臺添加下合法域名就好了 https://wx.qlogo.cn

      獲取小程序碼

       

      微信有3中方式獲取小程序碼

      wxacode.createQRCode

      獲取小程序二維碼,適用于需要的碼數量較少的業務場景。通過該接口生成的小程序碼,永久有效,有數量限制

      wxacode.get

      獲取小程序碼,適用于需要的碼數量較少的業務場景。通過該接口生成的小程序碼,永久有效,有數量限制

      wxacode.getUnlimited

      獲取小程序碼,適用于需要的碼數量極多的業務場景。通過該接口生成的小程序碼,永久有效,數量暫無限制

      好像沒有什么理由不選第三種吧

      這3個接口返回的都是圖片Buffer,我們需要做下處理,有2種方式

      方式1:把圖片存到服務器本地或轉存到alioss等第三方對象服務器上,最后把地址返回給小程序前端

      // 服務器
      let readable;
      let filePath = xxx; // 自己創建一個存圖片的目錄
      const url = `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${access_token}`;const result = await axios.post(url, {                scene: `a=${xxx}` // 小程序碼帶的參數,比如帶一個邀請碼            }, {                 headers: {                    'Content-Type': 'application/json' // POST 參數需要轉成 JSON 字符串,不支持 form 表單提交。                },                responseType: 'arraybuffer'             });            readable = result.data;            readable.pipe(fs.createWriteStream(filePath));復制代碼

      方式2:把Buffer轉成base64返回給小程序前端,前端在轉成圖片存到小程序本地

      // 服務器
      const url = `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${access_token}`;            const result = await axios.post(url, {                scene: `a=${xxx}` // 小程序碼帶的參數,比如帶一個邀請碼            }, {                 headers: {                    'Content-Type': 'application/json' // POST 參數需要轉成 JSON 字符串,不支持 form 表單提交。                },                responseType: 'arraybuffer'             });            const base64 = Buffer.from(result.data).toString('base64');
                  // 返回前端            res.send({                success: true,                data: `data:image/jpg;base64,${base64}`            });
      
      // 小程序前端
      // base64src.js base64轉圖片存到小程序臨時目錄中
      const fsm = wx.getFileSystemManager();const FILE_BASE_NAME = 'qrcode_base64src';const base64src = function(base64data) {  return new Promise((resolve, reject) => {    const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];    if (!format) {      reject(new Error('ERROR_BASE64SRC_PARSE'));    }    const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;    const buffer = wx.base64ToArrayBuffer(bodyData);    fsm.writeFile({      filePath,      data: buffer,      encoding: 'binary',      success() {        resolve(filePath);      },      fail() {        reject(new Error('ERROR_BASE64SRC_WRITE'));      },    });  });};module.exports = base64src;// index.js
      let base64Data = xxx; // 服務器返回的base64數據base64src(base64Data).then((src) => {                wx.getImageInfo({                    src: src,                    success: function (r) {                        console.log(r.path); // 圖片本地路徑                    },                    fail: function (r) {                        console.log(r);                    }                });            });
      
      復制代碼

      自定義組件 behavior

       

      有時候某些自定義組件會有大部分的相似功能,小部分差異,這時候可以使用behavior封裝共同的屬性和方法等,類似vue中的mixins。

      国产亚洲精品资源在线26u

          
          
          <th id="ljgpb"><pre id="ljgpb"><sup id="ljgpb"></sup></pre></th>

          <rp id="ljgpb"></rp>