這幾天正式開始微信小程式的修煉了，就目前而言來看簡直就是vue和react的結合體，所以在學小程式前，先把框架熟悉還是挺有用的。

一.簡介

1.1與普通網頁區別

二.第一個小程式

需要註冊小程式開發賬號，最主要是獲得AppId

然後就需要安裝 微信開發者工具

2.1設置外觀和代理

2.2模擬器查看效果

2.3真機查看效果

三.小程式代碼構成

3.1項目基本組成結構

3.2頁面組成部分

3.2.1 json文件的作用

• app.json

• projec.config.json

  

• sitemap.json我的理解為用戶在微信內部搜索的時候這個就發揮作用了，用戶可以直接通過微信搜索搜到你這個小程式

  

  現在就是表示所有小程式頁面都可以被搜索到

  如果不允許被索引到

  

• 頁面json

  

  會覆蓋掉全局下的配置

3.3 新建小程式頁面

直接通過修改app.json創建一個頁面即可自動創建

3.4 修改項目首頁

修改app.json裡面的順序為第一位即可

3.5 WXML模板

和html的區別

3.6 WXSS

和css區別

註意最好別用太生僻的選擇器，wxss不會認，第二個是元素選擇器

3.7 js

分為三類

四.小程式宿主環境

宿主環境即程式運行所依賴的環境，比如安卓系統只能安裝安卓軟體，ios系統只能安裝蘋果軟體

手機微信是小程式宿主環境

4.1 通信模型

通信主體分為渲染層（wxml、wxss）和邏輯層（js腳本）

通信模型分為兩部分，渲染層和邏輯層的通信，邏輯層和第三方伺服器的通信，都是由微信客戶端完成轉發

4.2 運行機制

小程式執行過程

頁面渲染過程

4.3 組件

一共分為九大類

• 視圖容器

  view（div）、scroll-view（可滾動視圖區域）、swiper和swiper-item（輪播圖組件和裡面的每一項）

  view基本使用

  

  scroll-view基本使用

  

  註意要加橫向或者縱向滾動的屬性

  swiper基本使用

  

  swiper常用屬性：

  

• 基礎內容

  text（span）、rich-text

  text：selectable屬性表示支持長按選中文本操作（註意小程式只有text有這個屬性）

  

  rich-text：將html字元串渲染為對應ui結構通過nodes屬性節點

  註意：外面是雙引號裡面要用單引號

  

• 其他常用組件

  button

  比htmlbutton功能要更豐富

  

  

  image

  圖片組件寬高預設300px 240px

  

image：mode屬性

可以指定圖片裁剪縮放模式

4.4 API

一共分為三大類

• 事件監聽API wx就是小程式的頂級對象，類似於window

• 同步API

  

• 非同步API

  

五.協同工作與發佈

5.1 許可權管理

首先如果是在中大型公司裡面，開發一個小程式是需要同時多個人一起來協同開發的，包括開發和測試都是有不同的許可權的

開發流程：

5.2 成員管理

主要就是項目成員和體驗成員，最大的就是管理員

項目成員和體驗成員的添加刪除在小程式管理後臺修改

5.3 發佈

小程式版本

上傳版本

上傳之後就可以在後臺看見上傳的版本

審核通過就可以發佈了

小程式的推廣與運行數據的查看

查看數據

一種是通過管理後臺

一種是通過小程式數據助手