### 1. 小程序注冊： ~~~ https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN ~~~ ### 2. 安裝開發者工具： ~~~ https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html ~~~ ### 3. 登陸配置 ~~~ 1. 微信掃碼登陸>小程序項目> 填路徑 appid使用測試號 不要配置文件 2. 配置文件如下圖 （注：文件夾得名字要和下面的文件名相同） ~~~  ### 4. 文件具體代碼 #### 4.1. app.js （外面app.js是app 里面的js是page） ~~~ App({ /** * 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次） */ onLaunch: function () { }, /** * 當小程序啟動，或從后臺進入前臺顯示，會觸發 onShow */ onShow: function (options) { }, /** * 當小程序從前臺進入后臺，會觸發 onHide */ onHide: function () { }, /** * 當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 并帶上錯誤信息 */ onError: function (msg) { } }) ~~~ #### 4.2. app.json ~~~ { "pages": [ "pages/index/index" 配置要顯示的頁面 小程序的全局配置 有先后順序 ], "window": { "navigationBarBackgroundColor": "#ffffff", 導航頭部顏色 "navigationBarTextStyle": "black", 字體顏色 "navigationBarTitleText": "小程序", 字體內容 "backgroundColor": "#eeeeee", "backgroundTextStyle": "light", "enablePullDownRefresh": false } } ~~~ #### 4.3. app.wxss ~~~ 相當于 css中base.css ~~~ #### 4.3. index.wxml ~~~ 相當于html ~~~ ### 4.4. index.js (page相當于new) （要將多余的刪掉 不然會報錯 用啥留啥） ~~~ Page({ data:{ String1 }, onLoad:function(options){ // 生命周期函數--監聽頁面加載 String2 }, onReady:function(){ // 生命周期函數--監聽頁面初次渲染完成 String3 }, onShow:function(){ // 生命周期函數--監聽頁面顯示 String4 }, onHide:function(){ // 生命周期函數--監聽頁面隱藏 String5 }, onUnload:function(){ // 生命周期函數--監聽頁面卸載 String6 }, onPullDownRefresh: function() { // 頁面相關事件處理函數--監聽用戶下拉動作 //下拉刷新時觸發的函數 String7 }, onReachBottom: function() { // 頁面上拉觸底事件的處理函數 String8 }, onShareAppMessage: function() { // 用戶點擊右上角分享 return { title: 'title', // 分享標題 desc: 'desc', // 分享描述 path: 'path' // 分享路徑 } } }) ~~~ ### 5.vscode插件安裝 ~~~ minapp 小程序助手 vscode weapp api vscode wxml vscode-wechat Easy WXLESS WeApp Snippets ~~~