微信小程序快速入門分享大綱

微信小程序

• 總體流程
• 開發細節

---

 

1、總體流程

一、註冊小程序帳號

郵箱註冊

不能使用同時註冊了微信其餘用途的郵箱

去郵箱激活帳號後，須要填寫我的實名信息

如果第一次成爲管理員，須要先補充我的實名信息

註冊完成

二、填寫小程序基本信息

1） 基本信息
2） 成員管理
3） 配置服務器域名 必須https

三、開發者工具

使用AppID建立一個新項目

如何真機調試

四、開發完成後，上傳代碼

提交審覈

微信收到通知，查看審覈結果

審覈經過後，發佈上線

 

2、開發細節

一、項目代碼結構

四部分：JSON WXML WXSS JS
基本流程：先根據 json 配置生成一個界面，頂部的顏色和文字你均可以在這個 json 文件裏邊定義好。緊接着會裝載這個頁面的 WXML 結構和 WXSS 樣式。最後會裝載 js。

公共
在app.json中，寫在 pages 的第一個頁面就是這個小程序的首頁（打開小程序看到的第一個頁面）；
小程序啓動以後，在 app.js 定義的 App 實例的 onLaunch 回調會被執行；
整個小程序只有一個 App 實例，是所有頁面共享的 如globalData 。

局部
在各頁面的js 中，Page 是一個頁面構造器，這個構造器就生成了一個頁面；
渲染完界面以後，頁面實例的 onLoad 回調會被執行。

二、JSON

app.json
project.config.json
page.json

三、WXML

相似HTML
不一樣：
標籤不一樣
指令語法不一樣 （注意與VUE的區別，特別是表達式） wx:if wx:else wx:for 指令裏的變量須要加雙括號

模板（data 是要模板渲染的數據，data="{{...item}}" 寫法是ES6的寫法，item是wx:for當前項，... 是展開運算符，在模板中不須要再{{item.courseName}} 而是直接{{courseName}}）

四、WXSS

WXSS 僅支持部分 CSS 選擇器
如何支持LESS

五、JS

經常使用API（好比請求、緩存等）

六、雲開發

什麼是雲開發
怎麼用

首先，開通雲開發服務。

建立雲開發項目demo看一下

雲開發控制檯的基本使用

demo在小程序代碼操做數據庫以前，必需要先對login文件夾執行「上傳並部署」（雲函數的基本用法）