微信小程式--關於加快小程式開發的幾個小建議

Kindear發表於2020-12-27
微信小程式

加快小程式開發的幾個小建議

1.使用 app.json建立頁面

​ 按照我們平常的開發習慣，建立一個新的頁面，一般都會先建立資料夾，再建立對應page的形式，建立完成後，app.json中會自動註冊該頁面。實際上，我們還可以通過直接在app.json中註冊頁面來生成對應的page。

"pages": [
    "pages/index/index",
    "pages/newpage/newpage"
 ],

​ 如上所示，在配置檔案中註冊該路徑，小程式就會自動建立該對應路徑。

2.善用編譯模式

​ 我們想要除錯某個頁面時，相當一部分開發者習慣於直接修改app.json來調整首個入棧頁面，實際上完全可以使用編譯模式新增編譯頁面，來代替修改配置檔案的行為。

3.元件複用小程式樣式

​ 這一點經常被遺忘，因為新建component的時候，小程式並不會展示該配置項。配置options如下，元件可以使用全域性樣式(app.wxss)

Component({
  //繼承colorui樣式
  options: {
    addGlobalClass: true,
    multipleSlots: true
  },
  ...
 }

4.app.js初始化內容函式化

​ 很多小程式onLaunch中寫著大量的內容，混亂不堪，後期除錯尤為痛苦。可以將不同的初始化內容寫為不同的函式，函式化、模組化。

onLaunch: function(options) {
    //此處需要有對進入小程式方式的處理
    this.InitCloud(); //初始化雲服務 / ESC
    this.InitCustom(); //初始化custom所需配置資訊
    this.InitEdu(); //初始化教務系統配置
 },

5.善用template

​ 對於內容大量重複的wxml內容，可以將之抽離為template模板檔案，使用時直接匯入使用即可。

<import src="template/NexuTemplate.wxml"/>
<view wx:for="{{dirlist}}" wx:key="item">
	<template is="dirshow" data="{{item}}"></template>
</view>

6.雲開發混合開發

​ 內容安全識別，openid獲取，圖片鑑黃，支付流程，內容推送這些東西如果使用自己的後臺實現，並不是這麼簡單，但是如果使用了雲開發的技術替換這一部分，自己專注於業務邏輯，你會開啟一片新天地。

雲開發部分功能（後面我會專門寫一篇文章介紹雲開發混合開發的內容）：

const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})


// 雲函式入口函式
exports.main = async (event, context) => {
  // console.log(event)
  switch (event.action) {
    case 'getWXACode': {
      return getWXACode(event)
    }
    case 'getOpenData': {
      return getOpenData(event)
    }
    case 'msgSecCheck': {
      return msgSecCheck(event)
    }
    case 'imgSecCheck': {
      return imgSecCheck(event)
    }
    case 'submitPages': {
      return submitPages(event)
    }
    default: {
      return
    }
  }
}

//獲取小程式碼
async function getWXACode(event) {
  console.log(event.url)
  // 此處將獲取永久有效的小程式碼，並將其儲存在雲檔案儲存中，最後返回雲檔案 ID 給前端使用

  const wxacodeResult = await cloud.openapi.wxacode.get({
    path: event.url || 'pages/index/index',
  })

  const fileExtensionMatches = wxacodeResult.contentType.match(/\/([^\/]+)/)
  const fileExtension = (fileExtensionMatches && fileExtensionMatches[1]) || 'jpg'

  const uploadResult = await cloud.uploadFile({
    // 雲檔案路徑，此處為演示採用一個固定名稱
    cloudPath: `wxCode/wxCode${Math.random() * 9999999}.${fileExtension}`,
    // 要上傳的檔案內容可直接傳入圖片 Buffer
    fileContent: wxacodeResult.buffer,
  })

  if (!uploadResult.fileID) {
    throw new Error(`上傳失敗，檔案為空，儲存伺服器狀態程式碼為空 ${uploadResult.statusCode}`)
  }

  return uploadResult.fileID
}

// 獲取openid
async function getOpenData(event) {
  // 需 wx-server-sdk >= 0.5.0
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

// 檢測文字是否合規
async function msgSecCheck(event) {
  // 需 wx-server-sdk >= 0.5.0
  return cloud.openapi.security.msgSecCheck({
    content: event.content,
  })
}

// 檢測圖片是否合規
async function imgSecCheck(event) {
  return cloud.openapi.security.imgSecCheck({
    media: {
      contentType: event.contentType,
      value: Buffer.from(event.value)
    }
  })
}

// 收錄頁面
async function submitPages(event) {
  return cloud.openapi.search.submitPages({
    pages: [{
      path: event.path,
      query: event.query
    }]
  })
}




//獲取日期
function getDateTime(sj) {
  var now = new Date(sj * 1000);
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var date = now.getDate();
  var hour = now.getHours();
  var minute = now.getMinutes();
  // var second = now.getSeconds();
  return year + "年" + month + "月" + date + "日";
}

7.將個人配置資料集中到一個檔案中

​ 比如說伺服器域名、介面令牌這些可能會變化，但經常使用的資料，集中到一個檔案中。

module.exports={
  UseCloud:true,
  CloudId:'',   			//雲開發環境id
  TraceUser:true,           //記錄使用者訪問日誌
  AdaptStorge:true,         //允許快取使用者資料
  SevDomain:'http://localhost'     //伺服器的域名
}

8.善用開發者工具的版本管理工具

相關文章