1、體驗官方提供的小程序組件/接口等

可以點擊進入相關組件看看效果和如何使用。

2、提前了解小程序的開發與發布

2.1 注冊一個小程序的開發賬號

https://mp.weixin.qq.com/wxamp/home/guide?lang=zh_CN&token=1313416074

個人只能注冊個人的賬號，不能注冊企業的賬號，個人的賬號無法調用微信支付的高級接口。

2.1.1 獲取appid

注冊完小程序，可以在如下找到

2.2、小程序的協同工作與發布推廣

1、 添加項目成員和體驗成員

2、小程序的版本

3、 小程序的發布

1、 上傳代碼

上傳后可以從以下圖中看到上傳的代碼

2 、提交審核

3 、發布上線

4、 小程序的推廣

1、 查看小程序的運營數據

3、微信小程序開發者工具使用

3.1 安裝

3.2 創建小程序項目

3.3 開發者工具使用功能介紹

3.3.1 常用的菜單工具

• 打開開發者文檔

• 構建npm
• 控制功能窗口是否展示
• （注意模擬器有時無法真正正常展示開發的功能，一切已掃描二維碼測試為準）
• 查看小程序的本地配置基本信息等
• 控制模擬器的展示機型（建議選擇iphone 6/7/8 ）可以切換當前模擬器頁面的頁面路徑、頁面參數、場景值等。

3.3.2 預覽開發中的小程序界面

方式一點擊編譯

方式二點擊預覽，出現一個二維碼，用手機微信掃描即可在手機看到界面

3.3.3 常用的開發功能

• 調式器可以像瀏覽器一樣，調式小程序的頁面

4、微信小程序代碼結構介紹

4.1 目錄結構介紹

1 pages 小程序頁面目錄

用來存放所有小程序的頁面，定義一個頁面由如下4部分組成，如index頁面

（1）頁面里的.json文件

如下小程序的index頁的導航就會變成綠色。

（2）頁面里的.wxml文件

（3）頁面里的.wxss文件

（4）頁面里的.js文件

2 app.json全局配置文件

3 project.config.json項目配置文件

對應菜單中的詳情

4 sitemap.json項目是否被微信索引配置文件

如下page為* ， action為allow，表示所有頁面允許被索引（如果不允許改成disallow）

5、小程序環境與代碼開發

小程序的宿主環境就是微信，微信給小程序提供了如下：

5.1通信模型

5.2 運行機制

5.3 頁面組件

5.3.1 視圖容器組件基本使用

5.3.1.1 展示view組件

5.3.1.2 滾動效果scroll-view組件

5.3.1.3 輪播圖swiper和swiper-item組件

5.3.2 基礎內容組件基本使用

5.3.2.1 文本text組件

長按選中只能在真機測試，在開發工具里無法測試

5.3.2.2 富文本rich-text組件

5.3.2.3 按鈕button和圖片image組件

button的使用如下

image的使用如下

5.4 頁面API

5.5 新建小程序頁面

（測試時創建不成功，從新創建項目又可以了）

5.6 修改小程序首頁

5.7 小程序頁面中4個文件的開發

5.7.1 js文件開發

1、數據定義

2、事件定義

5.7.2 wxml文件開發

1、數據綁定

將js里定義的data數據展示

如下：

<view>{{info}}</view>
<image src="{{imageURL}}"></image>

2、三元運算符

3、調試器看到當前渲染的數據

4、算術運算

5、事件綁定

（1）介紹

（2）點擊事件事例

（2.1）通過點擊事件修改data中的數據

（2.2）點擊事件傳參

<!– 事件傳參,如果傳的數字類型用{{}}，否則傳的就是字符串–>
<button type="primary" bindtap="btnTapDeliveryPara" data-para="{{22}}">傳參事件數字</button>
<button type="primary" bindtap="btnTapDeliveryPara" data-para="小寶">傳參事件字符串</button>

（3）文本框輸入事件

下圖的input應為<input bindinput="inputHandler"></input>

（本人測試時進行了手動編譯才行，可能工具沒反應過來）

（3.1）文本框與data之間的數據同步

第一步：定義數據

第二步：渲染結構

第三步：美化輸入框

第四步：綁定input處理事件，實現與data之間的數據同步

6、條件渲染

（1）wx:if wx:else

（2）block控制多個組件的展示與隱藏

（3）hidden

7、列表渲染

（1）wx:for

（2）vx:key

5.7.3 wxss文件開發

1、rpx尺寸單位

2、@import樣式導入

3、全局樣式和局部樣式

權重大小判斷就是定位到更小層次的權重一般較高，樣式就按權重高的，可以把鼠標放上去可以展示權重，

如下圖一比圖二的權重就高

5.7.4 json文件開發

1、配置當前頁

2、監聽當前頁的下拉刷新

3、監聽上拉觸底的加載

（1）上拉加載數據預防多次請求數據

案例如下

4、動態設置導航欄標題

如下場景需要設置動態標題，查官方文檔

根據官方說明只能在如下圖方法中設置

5.8 全局配置window窗口部分（app.json ）

window可以配置如下圖中的導航欄區域和背景區域

5.8.1 window節點常用配置項

（1）舉例設置導航欄標題

（2）舉例設置導航欄背景色

（3）舉例設置導航欄標題顏色

（僅支持black/white）

（4）全局開啟下拉刷新

不建議全局開啟下拉刷新，通常在需要的頁面里的json文件開啟當前頁有下拉刷新

（5）全局下拉的窗口背景色

（6）全局設置下拉的loading的樣式

僅支持light、dark

（7）設置上拉觸底的距離

5.9 全局配置頁簽tabBar（app.json）

1 tabBar頁簽介紹

（注意tab項里指定的pagePath相關的頁面，在pages里應排在頭部的位置，否則可能不展示）

2 tabBar頁簽設置舉例

在app.json中加如下

"tabBar": {
"list": [
{
"pagePath": "pages/pageSamples/pageList/list",
"text": "頁面",
"iconPath": "/images/icon/unchecked1.png",
"selectedIconPath": "/images/icon/checked1.png"
},
{
"pagePath": "pages/buttonSamples/buttonList/list",
"text": "按鈕",
"iconPath": "/images/icon/unchecked2.png",
"selectedIconPath": "/images/icon/checked2.png"
},
{
"pagePath": "pages/richTextSamples/richTextList/list",
"text": "富文本",
"iconPath": "/images/icon/unchecked3.png",
"selectedIconPath": "/images/icon/checked3.png"
},
{
"pagePath": "pages/swiperSamples/swiperList/list",
"text": "輪播圖",
"iconPath": "/images/icon/unchecked4.png",
"selectedIconPath": "/images/icon/checked4.png"
},
{
"pagePath": "pages/scrollViewSamples/scrollViewList/list",
"text": "滾動菜單",
"iconPath": "/images/icon/unchecked5.png",
"selectedIconPath": "/images/icon/checked5.png"
}
]
},

效果

3、自定義tabBar頁簽(需要用到組件)

步驟一、配置信息

如下為兼容低版本的,tabBar里的list不要刪除

步驟二、添加tabBar代碼文件（新建組件）

步驟三、使用Vant提供的樣式組件

根據Vant后面的代碼演示，找到我們需要的即可