開發前期準備
1. 進入註冊小程式賬號
https://mp.weixin.qq.com/wxopen/waregister?action=step1
2. 可在此處獲取appid
3.在此處下載開發工具
小程式配置 app.json檔案
pages裡放頁面路徑列表，最上面的開啟預設顯示；
window裡配置視窗樣式；
tabBar：底部 tab 欄的表現；
{
"pages": ["pages/index/index", "pages/logs/index"],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁"
},
{
"pagePath": "pages/logs/logs",
"text": "日誌"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
}複製程式碼window屬性：
| 屬性 | 型別 | 預設值 | 描述 | 最低版本 |
|---|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 導航欄背景顏色，如 #000000 | |
| navigationBarTextStyle | String | white | 導航欄標題顏色，僅支援 black / white | |
| navigationBarTitleText | String | 導航欄標題文字內容 | ||
| navigationStyle | String | default | 導航欄樣式，僅支援以下值：default 預設樣式custom 自定義導航欄，只保留右上角膠囊按鈕。參見注2。 | 微信客戶端 6.6.0 |
| backgroundColor | HexColor | #ffffff | 視窗的背景色 | |
| backgroundTextStyle | String | dark | 下拉 loading 的樣式，僅支援 dark / light |
快速建頁面級資料夾
補全路徑即可：
]}
會生成一個這樣的頁面級資料夾
ps：如果自己建檔案，那麼這四個檔名必須一致
【.js】處理邏輯層
【.wxml】處理檢視層
【.wxss】處理樣式層
檢視標籤
檢視容器(View Container)：
| 元件名 | 說明 |
|---|---|
| view | 檢視容器 |
| scroll-view | 可滾動檢視容器 |
| swiper | 滑塊檢視容器 |
基礎內容(Basic Content)：
| 元件名 | 說明 |
|---|---|
| icon | 圖示 |
| text | 文字 |
| rich-text | 富文字 |
| progress | 進度條 |
表單(Form)：
| 標籤名 | 說明 |
|---|---|
| button | 按鈕 |
| checkbox | 多項選擇器 |
| form | 表單 |
| input | 輸入框 |
| label | 標籤 |
| picker | 列表選擇器 |
| picker-view | 內嵌列表選擇器 |
| radio | 單項選擇器 |
| slider | 滾動選擇器 |
| switch | 開關選擇器 |
| textarea | 多行輸入框 |
導航(Navigation)：
| 元件名 | 說明 |
|---|---|
| navigator | 頁面連結 |
| functional-page-navigator | 跳轉到外掛功能頁 |
多媒體(Media)：
| 元件名 | 說明 |
|---|---|
| audio | 音訊 |
| image | 圖片 |
| video | 視訊 |
地圖(Map)：
| 元件名 | 說明 |
|---|---|
| map | 地圖 |
輪播圖用法示例：
1.建立一個class為idol-community的view容器
2.建立swiper標籤
3.一個swiper-item標籤裡面放一個image標籤
4.為swiper設定屬性即可
5.在當前js檔案中設定：
Page({
檢視：
swiper
滑塊檢視容器。
| 屬性名 | 型別 | 預設值 | 說明 | 最低版本 |
|---|---|---|---|---|
| indicator-dots | Boolean | false | 是否顯示皮膚指示點 | |
| indicator-color | Color | rgba(0, 0, 0, .3) | 指示點顏色 | 1.1.0 |
| indicator-active-color | Color | #000000 | 當前選中的指示點顏色 | 1.1.0 |
| autoplay | Boolean | false | 是否自動切換 | |
| current | Number | 0 | 當前所在滑塊的 index |
動態將其他檔案中的資料遍歷展示在檢視中：
例：頁面同級資料夾的兄弟資料夾data，中的newsdata.js資料檔案
newsdata.js中的內容：一條條的陣列
在newsdata.js頁面將陣列匯出：
在要接收的js頁面將資料接收：
1.用block標籤將要遍歷的檢視板塊包裹：
2.wx:for="{{newsData}}" for迴圈newsData這個陣列 wx:for-item="item" 起名為item
3.可直接這樣使用 <text>{{item.authorname}}</text>
<text>{{item.authorname}}</text>
將頁面檢視板塊 提取為元件：
例 1.在頁面級資料夾archives下建立資料夾archives-template作為頁面元件資料夾
2.資料夾下建立wxml和wxss檢視和樣式檔案
3.在wxml檢視檔案下建立template模板標籤，存放原檢視
給模板標籤起一個name
4.原檢視區域則存放：
用is：name名引進模板 動態獲取的data檔案則用...item表示
5.模板內的資料展示也不用再用
<text>{{item.authorname}}</text>
而是直接
<text>{{uthorname}}</text>
6.在頁面級wxml頁面開頭引入模板頁面：
第一個archives-template是資料夾名
7.在頁面級wxss頁面開頭引入模板樣式：
頁面跳轉：
使用 ：bindtap='goarc'
在本頁面js檔案裡：goarc函式