個人如何申請注冊微信小程序

（注：如果注冊小程序請按步驟操作）

一、申請前準備：

1. 微信持有人以及郵箱持有人已滿18周歲

2. 一個未注冊微信（服務號、訂閱號、小程序）的郵箱。

二、申請步驟

1. 準備一個未注冊微信（服務號、訂閱號、小程序）的郵箱，如果沒有，請到相關郵箱網站去申請一個；

2. 進入微信公眾號平臺，點擊右上角“立即注冊”按鈕，開始注冊；

3. 選擇類型。在頁面選擇需要注冊的類型，點擊“小程序”；

4. 填入郵箱。填寫郵箱、設置密碼、填寫驗證碼，勾選同意協(xié)議后點擊“注冊”按鈕；

5. 郵箱激活。進入你的郵箱進行驗證，微信會發(fā)送一封郵件至郵箱，在郵箱內點擊鏈接即可；

6. 信息登記。選擇主體類型為“個人”，填寫主體相關資料，并用綁定主體銀行卡的微信掃描二維碼進行驗證，然后“提交”，提交后會彈出警告信息“主體信息一經提交不能進行修改”，確認無誤后點擊“確認”；

7. 成功注冊。提交完畢就成功注冊屬于你的小程序，不過這只是注冊了一個賬號，后續(xù)還需要進行完善信息和對小程序進行開發(fā)和發(fā)布才能使用；

三、注意事項：

1. 郵箱不能注冊過微信的相關賬號；

2. 主體信息提交后不能進行修改。

小程序的開發(fā)

（注：在這之前需要安裝微信開發(fā)者工具（當然你也可以選擇nui-app來做微信小程序開發(fā)，使用極客開發(fā)工具HBuilder X），并且認真閱讀微信官方文檔·小程序）,做好這些準備工作后我們就可以寫代碼了

一、保存自己的appId

（注 : 這很重要，在之后每創(chuàng)建一個項目都需要用到）

搜索引擎搜索微信公眾平臺 》 開發(fā) 》 開發(fā)設置 》 開發(fā)者id 》 找到自己的appID 》在本地創(chuàng)建個文件保存起來（前提保證自己微信公眾平臺在登陸成功狀態(tài)）

二、登入微信開發(fā)者工具（開始你的編程之旅）

1. 首先運行小程序開發(fā)者工具 》 掃碼登陸 》 選擇小程序項目 》 使用微信開發(fā)者工具創(chuàng)建小程序項目 》 使用微信開發(fā)者工具創(chuàng)建小程序項目 》 進入小程序項目的創(chuàng)建窗口 》 項目目錄是一定要填寫的 》 這里就需要你之前保存的appID了 》 項目名稱可以隨便填寫了 》以上都填寫完成后,點確定

2. 微信小程序界面 頂部為工具欄，界面的設置修改，模擬器/編輯器/調試器的開關 左側為手機模擬器 右上側為文件結構與代碼編輯框 右下側為調試器

三、全局配置

小程序根目錄下的 app.json 文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設置網絡超時時間、設置多 tab 等。完整配置項說明請參考小程序全局配置

四、頁面配置

每一個小程序頁面也可以使用同名 .json 文件來對本頁面的窗口表現(xiàn)進行配置，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。完整配置項說明請參考小程序頁面配置

五、sitemap 配置(控制臺索引的關閉)

小程序根目錄下的 sitemap.json 文件用來配置小程序及其頁面是否允許被微信索引。完整配置項說明請參考小程序 sitemap 配置

解決方法如下：打開project.config.json，在setting下面增加 “checkSiteMap”: false

  "setting": {
    "checkSiteMap": false
  }

原文地址：https://blog.csdn.net/Poppy_LYT/article/details/99677106

六、注冊小程序

每個小程序都需要在 app.js 中調用 App 方法注冊小程序實例，綁定生命周期回調函數(shù)、錯誤監(jiān)聽和頁面不存在監(jiān)聽函數(shù)等。詳細的參數(shù)含義和使用請參考 App 參考文檔 。

七、注冊頁面

使用 Page 構造器注冊頁面

在js文件中輸寫page 》 按tab/enter來實現(xiàn)注冊

開發(fā)者文檔鏈接：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

詳細的參數(shù)含義和使用請參考 Page 參考文檔 。

八、生命周期

九、頁面路由

在小程序中所有頁面的路由全部由框架進行管理。

路由方式

開發(fā)者文檔鏈接：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html

參數(shù)參考：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

注意:

• navigateTo, redirectTo 只能打開非 tabBar 頁面。

• switchTab 只能打開 tabBar 頁面。

• reLaunch 可以打開任意頁面。

• 頁面底部的 tabBar 由頁面決定，即只要是定義為 tabBar 的頁面，底部都有 tabBar。

• 調用頁面路由帶的參數(shù)可以在目標頁面的onLoad中獲取。

十、模塊化

可以將一些公共的代碼抽離成為一個單獨的 js 文件，作為一個模塊。模塊只有通過 module.exports 或者 exports 才能對外暴露接口。

注意：

• exports 是 module.exports 的一個引用，因此在模塊里邊隨意更改 exports 的指向會造成未知的錯誤。所以更推薦開發(fā)者采用 module.exports 來暴露模塊接口，除非你已經清晰知道這兩者的關系。

• 小程序目前不支持直接引入 node_modules , 開發(fā)者需要使用到 node_modules 時候建議拷貝出相關的代碼到小程序的目錄中，或者使用小程序支持的 npm 功能。

  npm安裝參考：https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

十一、文件作用域

在 JavaScript 文件中聲明的變量和函數(shù)只在該文件中有效；不同的文件中可以聲明相同名字的變量和函數(shù)，不會互相影響。

十二、API

小程序開發(fā)框架提供豐富的微信原生 API，可以方便的調起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等。詳細介紹請參考 API 文檔。

通常，在小程序 API 有以下幾種類型：

事件監(jiān)聽 API

我們約定，以 on 開頭的 API 用來監(jiān)聽某個事件是否觸發(fā)，如：wx.onSocketOpen，wx.onCompassChange 等。

這類 API 接受一個回調函數(shù)作為參數(shù)，當事件觸發(fā)時會調用這個回調函數(shù)，并將相關數(shù)據(jù)以參數(shù)形式傳入。

代碼示例

  try {
    wx.setStorageSync('key', 'value')
  } catch (e) {
    console.error(e)
  }

同步 API

我們約定，以 Sync 結尾的 API 都是同步 API， 如 wx.setStorageSync，wx.getSystemInfoSync 等。此外，也有一些其他的同步 API，如 wx.createWorker，wx.getBackgroundAudioManager 等，詳情參見 API 文檔中的說明。

同步 API 的執(zhí)行結果可以通過函數(shù)返回值直接獲取，如果執(zhí)行出錯會拋出異常。

代碼示例

try {
  wx.setStorageSync('key', 'value')
} catch (e) {
  console.error(e)
}

異步 API

大多數(shù) API 都是異步 API，如 wx.request，wx.login 等。這類 API 接口通常都接受一個 Object 類型的參數(shù)，這個參數(shù)都支持按需指定以下字段來接收接口調用結果：

1. Object 參數(shù)說明

2. 回調函數(shù)的參數(shù)

success，fail，complete 函數(shù)調用時會傳入一個 Object 類型參數(shù)，包含以下字段：

異步 API 的執(zhí)行結果需要通過 Object 類型的參數(shù)中傳入的對應回調函數(shù)獲取。部分異步 API 也會有返回值，可以用來實現(xiàn)更豐富的功能，如 wx.request，wx.connectSocket 等。

代碼示例

  wx.login({
    success(res) {
      console.log(res.code)
    }
  })

3. 異步 API 返回 Promise

基礎庫 2.10.2 版本起，異步 API 支持 callback & promise 兩種調用方式。當接口參數(shù) Object 對象中不包含 success/fail/complete 時將默認返回 promise，否則仍按回調方式執(zhí)行，無返回值。

注意事項

1. 部分接口如 downloadFile, request, uploadFile, connectSocket, createCamera（小游戲）本身就有返回值， 它們的 promisify 需要開發(fā)者自行封裝。

2. 當沒有回調參數(shù)時，異步接口返回 promise。此時若函數(shù)調用失敗進入 fail 邏輯， 會報錯提示 Uncaught (in promise)，開發(fā)者可通過 catch 來進行捕獲。

3. wx.onUnhandledRejection 可以監(jiān)聽未處理的 Promise 拒絕事件。

代碼示例

<!-- callback 形式調用 -->
wx.chooseImage({
  success(res) {
    console.log('res:', res)
  }
})

<!-- promise 形式調用 -->
wx.chooseImage().then(res => console.log('res: ', res))

wx.chooseImage().then(res => console.log('res: ', res))</pre>

視圖層 View

開發(fā)者文檔鏈接：https://developers.weixin.qq.com/miniprogram/dev/framework/view/

小程序運行時

開發(fā)者文檔鏈接：https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/env.html

十三、基礎能力

網絡

在小程序/小游戲中使用網絡相關的 API 時，需要注意下列問題，請開發(fā)者提前了解。

1. 服務器域名配置

每個微信小程序需要事先設置通訊域名，小程序只可以跟指定的域名進行網絡通信。包括普通 HTTPS 請求（wx.request）、上傳文件（wx.uploadFile）、下載文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）。

從基礎庫 2.4.0 開始，網絡接口允許與局域網 IP 通信，但要注意 不允許與本機 IP 通信。

從 2.7.0 開始，提供了 UDP 通信（wx.createUDPSocket)。

配置流程

服務器域名請在 「小程序后臺-開發(fā)-開發(fā)設置-服務器域名」 中進行配置，配置時需要注意：

• 域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 協(xié)議；

• 域名不能使用 IP 地址（小程序的局域網 IP 除外）或 localhost；

• 可以配置端口，如 https://myserver.com:8080，但是配置后只能向 https://myserver.com:8080 發(fā)起請求。如果向 https://myserver.com、https://myserver.com:9091 等 URL 請求則會失敗。

• 如果不配置端口。如 https://myserver.com，那么請求的 URL 中也不能包含端口，甚至是默認的 443 端口也不可以。如果向 https://myserver.com:443 請求則會失敗。

• 域名必須經過 ICP 備案；

• 出于安全考慮，api.weixin.qq.com 不能被配置為服務器域名，相關API也不能在小程序內調用。 開發(fā)者應將 AppSecret 保存到后臺服務器中，通過服務器使用 getAccessToken 接口獲取 access_token，并調用相關 API；

• 對于每個接口，分別可以配置最多 20 個域名。

2. 網絡請求

超時時間

• 默認超時時間和最大超時時間都是 60s；

• 超時時間可以在 app.json 或 game.json 中通過 networktimeout 配置。

使用限制

• 網絡請求的 referer header 不可設置。其格式固定為 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 為小程序的 appid，{version} 為小程序的版本號，版本號為 0 表示為開發(fā)版、體驗版以及審核版本，版本號為 devtools 表示為開發(fā)者工具，其余為正式版本；

• wx.request、wx.uploadFile、wx.downloadFile 的最大并發(fā)限制是 10 個；

• wx.connectSocket 的最大并發(fā)限制是 5 個。

• 小程序進入后臺運行后，如果 5s 內網絡請求沒有結束，會回調錯誤信息 fail interrupted；在回到前臺之前，網絡請求接口調用都會無法調用。

返回值編碼

• 建議服務器返回值使用 UTF-8 編碼。對于非 UTF-8 編碼，小程序會嘗試進行轉換，但是會有轉換失敗的可能。

• 小程序會自動對 BOM 頭進行過濾（只過濾一個BOM頭）。

回調函數(shù)

• 只要成功接收到服務器返回，無論 statusCode 是多少，都會進入 success 回調。請開發(fā)者根據(jù)業(yè)務邏輯對返回值進行判斷。

3. 常見問題

HTTPS 證書

小程序必須使用 HTTPS/WSS 發(fā)起網絡請求。請求時系統(tǒng)會對服務器域名使用的 HTTPS 證書進行校驗，如果校驗失敗，則請求不能成功發(fā)起。由于系統(tǒng)限制，不同平臺對于證書要求的嚴格程度不同。為了保證小程序的兼容性，建議開發(fā)者按照最高標準進行證書配置，并使用相關工具檢查現(xiàn)有證書是否符合要求。

對證書要求如下：

• HTTPS 證書必須有效；

  • 證書必須被系統(tǒng)信任，即根證書被已系統(tǒng)內置

  • 部署 SSL 證書的網站域名必須與證書頒發(fā)的域名一致

  • 證書必須在有效期內

  • 證書的信任鏈必需完整（需要服務器配置）

• iOS 不支持自簽名證書;

• iOS 下證書必須滿足蘋果 App Transport Security (ATS) 的要求;

• TLS 必須支持 1.2 及以上版本。部分舊 Android 機型還未支持 TLS 1.2，請確保 HTTPS 服務器的 TLS 版本支持 1.2 及以下版本;

• 部分 CA 可能不被操作系統(tǒng)信任，請開發(fā)者在選擇證書時注意小程序和各系統(tǒng)的相關通告。

  • Chrome 56/57 內核對 WoSign、StartCom 證書限制周知

證書有效性可以使用 openssl s_client -connect example.com:443 命令驗證，也可以使用其他在線工具。

除了網絡請求 API 外，小程序中其他 HTTPS 請求如果出現(xiàn)異常，也請按上述流程進行檢查。如 https 的圖片無法加載、音視頻無法播放等。

跳過域名校驗

在微信開發(fā)者工具中，可以臨時開啟 開發(fā)環(huán)境不校驗請求域名、TLS版本及HTTPS證書 選項，跳過服務器域名的校驗。此時，在微信開發(fā)者工具中及手機開啟調試模式時，不會進行服務器域名的校驗。

在服務器域名配置成功后，建議開發(fā)者關閉此選項進行開發(fā)，并在各平臺下進行測試，以確認服務器域名配置正確。

如果手機上出現(xiàn) “打開調試模式可以發(fā)出請求，關閉調試模式無法發(fā)出請求” 的現(xiàn)象，請確認是否跳過了域名校驗，并確認服務器域名和證書配置是否正確。

十四、局域網通信

開發(fā)者文檔鏈接：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/mDNS.html

其余詳細介紹參考微信開發(fā)者文檔。。。

小程序的使用

自定義 tabBar

使用流程

1. 配置信息

• 在 app.json 中的 tabBar 項指定 custom 字段，同時其余 tabBar 相關配置也補充完整。

• 所有 tab 頁的 json 里需聲明 usingComponents 項，也可以在 app.json 全局開啟。

示例：

{
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "組件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  "usingComponents": {}
}

微信開發(fā)者文檔鏈接：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html

輪播圖的使用 swiper

滑塊視圖容器。其中只可放置swiper-item組件，否則會導致未定義的行為。

微信開發(fā)者文檔鏈接：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

swiper-item

僅可放置在swiper組件中，寬高自動設置為100%。

圖片比例縮放 image（通過mode屬性控制）

開發(fā)者文檔鏈接：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

網絡請求

代碼示例：

wx.request({
  url: 'test.php', //接口路徑
  data: {//請求所需參數(shù)
    x: '',
    y: ''
  },
  header: {//請求頭
    'content-type': 'application/json' // 默認值
  },
  success (res) {//成功回調
    console.log(res.data)
  },
  fail(err){//失敗回調
      console.log(err)
  },
  complete(){//調用結束的回調函數(shù)（調用成功、失敗都會執(zhí)行）
      console.log('請求結束')
  }
})

微信開發(fā)者文檔鏈接：https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

消息提示框wx.showToast(Object object)

代碼示例：

wx.showToast({
  title: '成功',//有icon圖標時title最多顯示7個漢字，沒有時最多顯示兩行
  icon: 'success',//success成功圖標，loading加載圖標，none不顯示圖標
  duration: 2000//提示的延遲時間
})

微信開發(fā)者文檔鏈接：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html

修改各頁面導航文字

在json中更改

{
    "navigationBarTitleText": "首頁"
}

在js中修改

wx.setNavigationBarTitle({
  title: '當前頁面'
})

本地存儲同步異步

異步

wx.setStorage({
  key:"key",
  data:"value"
})

同步

 wx.setStorageSync('key', 'value')

微信開發(fā)者文檔：https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html

擴展能力里面有一些很好用的組件和圖標

微信開發(fā)者文檔：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/

書寫時間：2020.04.08