關於微信小程序的二三事（技術篇）

時間 2019-12-05

標籤關於微信程序二三技術简体版

原文原文鏈接

開發環境以及demo:

參見官方文檔，註冊->安裝開發工具->新建項目，demo就跑起來了。javascript

這一步比較簡單，按照提示一步步安裝好就行，而後用微信掃描二維碼登錄。至此小程序的開發環境差很少完成。php

代碼構成

pagescss
- indexhtml
  - index.js
  - index.wxml
  - index.wxss
- logsvue
  - logs.js
  - logs.json
  - logs.wxml
  - logs.wxss
utilsjava
- utils.js
app.js
app.json
app.wxss
project.config.json

文件詳解

app.json是對當前小程序的全局配置，包括了小程序的全部頁面路徑、界面表現、網絡超時時間、底部 tab 等。demo 項目裏的 app.json 配置內容以下：webpack
```
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
```
咱們簡單說一下這個配置各個項的含義:git
- pages字段 —— 用於描述當前小程序全部頁面路徑，這是爲了讓微信客戶端知道當前你的小程序頁面定義在哪一個目錄。
- window字段 —— 小程序全部頁面的頂部背景顏色，文字顏色定義在這裏的。
  詳細配置能夠參考：小程序的配置 app.json
project.config.json，開發工具自己個性化配置，好比界面顏色、編譯配置等。其餘配置項細節能夠參考文檔開發者工具的配置。
page.json，其實用來表示 pages/logs 目錄下的 logs.json 這類和小程序頁面相關的配置。
若是你整個小程序的風格是藍色調，那麼你能夠在 app.json 裏邊聲明頂部顏色是藍色便可。實際狀況可能不是這樣，可能你小程序裏邊的每一個頁面都有不同的色調來區分不一樣功能模塊，所以咱們提供了 page.json，讓開發者能夠獨立定義每一個頁面的一些屬性，例如剛剛說的頂部顏色、是否容許下拉刷新等等。github

其餘配置項細節能夠參考文檔小程序的配置page.json。web
```
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
```

4.wxml和wxss，其實就是擴展了的html和css，加入一些相似 wx:if 這樣的屬性以及 {{ }} 這樣的表達式，配合js來管理狀態。和vue一模一樣，寫過模板引擎的同窗也能夠很快上手。

小程序能力

這一章實際是你們都比較關心的，到底小程序能調用微信的哪些能力。參見小程序的API 。
例如：

請求：

wx.request({
  url: 'test.php', 
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json' // 默認值
  },
  success: function(res) {
    console.log(res.data)
  }

須要注意的是小程序只能請求https的接口，開發模式下能夠打開詳情 - 不校驗合法域名、web-view（業務域名）、TLS 版本以及 HTTPS 證書來調試http請求。

多線程
createWorker相似HTML5的webworker，能夠作一些計算相關的事

喚起app
launchApp(OBJECT)
須要注意的是，並不能經過api調用來喚起app，只能聽經過用戶手動觸發。並且只能跳回分享該頁面的app。以下圖

獲取位置 ：

wx.getLocation({
  type: 'wgs84',
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    var speed = res.speed
    var accuracy = res.accuracy
  }
})

open-data，用於展現微信開放的數據，例：王者榮耀羣排名

還支持canvas和地圖，能夠作不少有意思的東西。

熱更新，h5

由於要走小程序的審覈，因此實現熱更新的方法只有依靠webview了，並且webview有和小程序頁面同樣的history，並且沒有小程序只能嵌套5層頁面的限制，不過只有企業應用纔可使用，可是不妨礙在開發模式下體驗。webview組件

推送

模板消息
可使用消息模板，可是有必定的限制：

下發條件說明

支付
當用戶在小程序內完成過支付行爲，可容許開發者向用戶在7天內推送有限條數的模板消息（1次支付可下發1條，屢次支付下發條數獨立，互相不影響）

提交表單
當用戶在小程序內發生過提交表單行爲且該表單聲明爲要發模板消息的，開發者須要向用戶提供服務時，可容許開發者向用戶在7天內推送有限條數的模板消息（1次提交表單可下發1條，屢次提交下發條數獨立，相互不影響）

違規說明
除不能違反運營規範外，還不能違反如下規則，包括但不限於：

不容許惡意誘導用戶進行觸發操做，以達到可向用戶下發模板目的
不容許惡意騷擾，下發對用戶形成騷擾的模板
不容許惡意營銷，下發營銷目的模板

整體而言，小程序的通知限制仍是不少的。下面是一個通知的例子：

轉發按鈕

轉發文檔
能夠在頁面內安放一個轉發按鈕

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 來自頁面內轉發按鈕
      console.log(res.target)
    }
    return {
      title: '自定義轉發標題',
      path: '/page/user?id=123',
      success: function(res) {
        // 轉發成功
      },
      fail: function(res) {
        // 轉發失敗
      }
    }
  }
})