微信小程序介紹- 鏈接
微信小程序，簡稱小程序，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用
1. 為什么是微信小程序?
- 微信有海量用戶，而且粘性很高，在微信里開發產品更容易觸達用戶。
- 推廣app 或公眾號的成本太高。
- 開發適配成本低。
- 容易小規模試錯，然后快速迭代。
- 跨平臺。
2. 微信小程序歷史
- 2016年1月11日，微信之父張小龍時隔多年的公開亮相，解讀了微信的四大價值觀。張小龍指出，越來越多產品通過公眾號來做，因為這里開發、獲取用戶和傳播成本更低。拆分出來的服務號并沒有提供更好的服務，所以微信內部正在研究新的形態，叫**「微信小程序」** 需要注意的是，之前是叫做 應用號
- 2016年9月21日，微信小程序正式開啟內測。在微信生態下，觸手可及、用完即走的微信小程序引起廣泛關注。騰訊云正式上線微信小程序解決方案，提供小程序在云端服務器的技術方案。
- 2017年1月9日，微信推出的“小程序”正式上線。“小程序”是一種無需安裝，即可使用的手機“應用”。不需要像往常一樣下載App，用戶在微信中“用完即走”。
3. 瘋狂的微信小程序
- 微信月活已經達到10.82億。其中55歲以上的用戶也達到6300萬
- 信息傳達數達到450億
- 小程序覆蓋超過200+行業，交易額增長超過6倍，服務1000億+人次,創造出了5000億+的商業價值
4. 還有其他的小程序
- 支付寶小程序22
- 百度小程序
- QQ小程序
- 今日頭條 + 抖音小程序
5.官方微信小程序體驗
小程序示例源碼
2準備
1. 注冊賬號
-
建議使用全新的郵箱，沒有注冊過其他小程序或者公眾號的。
-
訪問注冊頁面，耐心完成注冊即可。
2. 獲取APPID
-
由于后期調用微信小程序的接口等功能，需要索取開發者的小程序中的
APPID，所以在注冊成功后，可登錄，然后獲取APPID。 -
登錄，成功后
開發=>開發設置=>獲取 AppID
3. 開發工具
-
下載地址
-
微信小程序自帶開發者工具，集 開發 預覽 調試 發布 于一身的 完整環境。
第一個微信小程序
####1. 打開微信開發者工具
- 注意 第一次登錄的時候 需要掃碼登錄
2. 新建小程序項目
3. 填寫項目信息
微信開發者工具介紹
小程序結構目錄
1. 小程序文件結構和傳統web對比
| 結構 | 傳統web | 微信小程序 |
|---|---|---|
| 結構 | HTML | WXML |
| 樣式 | CSS | WXSS |
| 邏輯 | Javascript | Javascript |
| 配置 | 無 | JSON |
- 通過以上對比得出，傳統web 是三層結構。而微信小程序 是四層結構，多了一層 配置.json
####2. 基本的項目目錄
小程序配置文件
-
一個小程序應用程序會包括最基本的兩種配置文件。一種是全局的
app.json和 頁面自己的page.json -
注意：配置文件中不能出現注釋
1. 全局配置 app.json
-
app.json配置
-
app.json是當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等。
{"pages":["pages/index/index","pages/logs/logs"],"window":{"navigationBarBackgroundColor": "#f00", "navigationBarTextStyle" : "black", "navigationBarTitleText": "小馬哥","navigationStyle" : "default","backgroundColor" : "#0f0","backgroundTextStyle" : "dark","enablePullDownRefresh" : false,"backgroundColorTop" : "#00f", // 窗口頂部背景 真機調試 僅ios "backgroundColorBottom" : "#f00", // 窗口底部背景 真機調試 僅ios "pageOrientation": "auto"}
}
字段的含義
pages字段 —— 用于描述當前小程序所有頁面路徑，這是為了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄。window字段 —— 定義小程序所有頁面的頂部背景顏色，文字顏色定義等。tabBar字段 – 詳見底部 tab 欄
####2. 頁面配置 page.json
-
page.json
-
這里的 app.json 其實用來表示該小程序頁面相關的配置
-
頁面的配置只能設置 app.json 中部分 window 配置項的內容, 頁面中配置會覆蓋 app.json 的 window 中相同的配置項
| 屬性 | 類型 | 默認值 | 描述 |
|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 導航欄背景顏色，如 #000000 |
| navigationBarTextStyle | String | white | 導航欄標題顏色，僅支持 black / white |
| navigationBarTitleText | String | 導航欄標題文字內容 | |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 |
| backgroundTextStyle | String | dark | 下拉 loading 的樣式，僅支持 dark / light |
| enablePullDownRefresh | Boolean | false | 是否全局開啟下拉刷新。 詳見 Page.onPullDownRefresh |
| onReachBottomDistance | Number | 50 | 頁面上拉觸底事件觸發時距頁面底部距離，單位為px。 詳見 Page.onReachBottom |
| disableScroll | Boolean | false | 設置為 true 則頁面整體不能上下滾動；只在頁面配置中有效，無法在 app.json 中設置該項 (備:類似overflow:hidden) |
學小程序
- 組件
- api
常見組件
重點講解小程序中常用的布局組件
view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox。等
1. view
- 視圖容器 - 相當于之前的 div
- 屬性 :
- hover-class 指定按下去的樣式類
<view hover-class="h-class">點擊我試試
</view>
2. text
- 文本標簽 - 相當于之前 span
- 特殊用法 :
- 長按文字可以復制 (只有該標簽有這個功能)
- 設置true 才可以選擇, 手機預覽測試效果
- 可以對空格 回車 進行編碼
- 長按文字可以復制 (只有該標簽有這個功能)
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| selectable | Boolean | false | 文本是否可選 |
| decode | Boolean | false | 是否解碼 |
- 代碼
//1.1 不可以選擇
<text>測試選擇</text>
//1.2 可以選擇 (手機測試)
<text selectable='{{ true }}'>測試選擇</text>//2.1 顯示空格失敗 : 結果 => 姓 名
<text>姓 名</text>
//2.2 顯示空格成功 : 結果 => 姓 名
<text decode'>姓 名</text>//3 其他幾個格式 -- 看圖
<text decode>正 正@</text>
<text decode>正 正</text>
<text decode>正 正</text>
- 使用場景
<view><text decode="{{ true }}">姓 名</text>
</view>
<view><text>產品名</text>
</view>
3. icon
- 圖標組件
| 屬性 | 類型 | 默認值 | 必填 | 說明 |
|---|---|---|---|---|
| type | string | 是 | icon的類型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear | |
| size | number/string | 23 | 否 | icon的大小 |
| color | string | 否 | icon的顏色，同css的color |
- 代碼
<icon type="success" size="40" color="red"/>
4. radio
- 單選框
- 需要 搭配
radio-group一起使用
<radio-group > <radio>男</radio><radio>女</radio>
</radio-group>
5. checkbox
-
多選框
-
需要 搭配
checkbox-group一起使用
<checkbox-group><checkbox>前端</checkbox><checkbox>java</checkbox>
</checkbox-group>
6. image
- 圖標標簽
- image 組件默認寬高 320*240
- 屬性
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| src | String | 圖片資源地址 | |
| mode | String | ‘scaleToFill’ | 圖片裁剪、縮放的模式 |
| lazy-load | Boolean | false | 圖片懶加載 |
mode 有效值：
| 值 | 說明 | |
|---|---|---|
| scaleToFill | 縮放模式，不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素 | |
| aspectFit | 縮放模式，保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。 | |
| aspectFill | 縮放模式，保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生截取。 |
使用場景
- scaleToFill : 盒子尺寸和圖片尺寸大小一樣, 使用該模式
- aspectFit : 詳情頁頂部顯示圖片 (右)
- aspectFill : 列表item 使用該模式 (左)
//鏈接
<view><image mode="aspectFit" src="http://img2.imgtn.bdimg.com/it/u=1668465722,3535501153&fm=214&gp=0.jpg"></image>
</view>
<view><image mode="aspectFit" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1018718673,2637294948&fm=26&gp=0.jpg"></image>
</view>
7. swiper
-
輪播圖組件
-
默認寬度 100% 高度 150px
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| indicator-dots | Boolean | false | 是否顯示面板指示點 |
| indicator-color | Color | rgba(0, 0, 0, .3) | 指示點顏色 |
| indicator-active-color | Color | #000000 | 當前選中的指示點顏色 |
| autoplay | Boolean | false | 是否自動播放 |
| interval | Number | 5000 | 自動切換時間間隔 |
| circular | Boolean | false | 是否循環輪播 |
-
swiper
- 滑塊視圖容器
-
swiper-item
- 滑塊
-
打開淘寶使用 :
m.taobao.com
8. navigator
- 導航組件 類似超鏈接標簽
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| target | String | self | 在哪個目標上發生跳轉，默認當前小程序，可選值self/miniProgram |
| url | String | 當前小程序內的跳轉鏈接 | |
| open-type | String | navigate | 跳轉方式 |
open-type 有效值：
| 值 | 說明 |
|---|---|
| navigate | 保留當前頁面，跳轉到應用內的某個頁面，但是不能跳到 tabbar 頁面 |
| redirect | 關閉當前頁面，跳轉到應用內的某個頁面，但是不允許跳轉到 tabbar 頁面。 |
| switchTab | 跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面 |
| reLaunch | 關閉所有頁面，打開到應用內的某個頁面 |
| navigateBack | 關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層 |
| exit | 退出小程序，target="miniProgram"時生效 |
?
9. rich-text
-
富文本標簽
- 可以將html字符串解析成 對應標簽，類似 vue中
v-html功能
- 可以將html字符串解析成 對應標簽，類似 vue中
-
通過nodes屬性來實現
- 接收標簽字符串
- 接收對象數組
nodes屬性
nodes屬性支持 字符串 和 標簽節點數組
| 屬性 | 說明 | 類型 | 必填 | 備注 |
|---|---|---|---|---|
| name | 標簽名 | string | 是 | 支持部分受信任的 HTML 節點 |
| attrs | 屬性 | object | 否 | 支持部分受信任的屬性，遵循 Pascal 命名法 |
| children | 子節點列表 | array | 否 | 結構和 nodes 一致 |
文本節點：type = 'text’
| 屬性 | 說明 | 類型 | 必填 | 備注 |
|---|---|---|---|---|
| text | 文本 | string | 是 | 支持entities |
- 代碼
// 標簽字符串str :'<div style="color:red;" >呵呵</div>',// 對象數組str1 : [{name:'div',attrs:{style:"color:red;"},children : [{type:'text',text:'哈哈'}]}]// 使用
<rich-text nodes='{{ str1 }}'></rich-text>
10. button
<buttontype="default"size="{{defaultSize}}"loading="{{loading}}"plain="{{plain}}"
>default
</button>
| 屬性 | 類型 | 默認值 | 必填 | 說明 |
|---|---|---|---|---|
| size | string | default | 否 | 按鈕的大小 |
| type | string | default | 否 | 按鈕的樣式類型 |
| plain | boolean | false | 否 | 按鈕是否鏤空，背景色透明 |
| disabled | boolean | false | 否 | 是否禁用 |
| loading | boolean | false | 否 | 名稱前是否帶 loading 圖標 |
| form-type | string | 否 | 用于form組件，點擊分別會觸發 form 組件的 submit/reset 事件 | |
| open-type | string | 否 | 微信開放能力 |
size 的合法值
| 值 | 說明 |
|---|---|
| default | 默認大小 |
| mini | 小尺寸 |
type 的合法值
| 值 | 說明 |
|---|---|
| primary | 綠色 |
| default | 白色 |
| warn | 紅色 |
form-type 的合法值
| 值 | 說明 |
|---|---|
| submit | 提交表單 |
| reset | 重置表單 |
<form bindsubmit="handle"><input name='n1'></input><input name='n2'></input><button form-type="submit">重置</button><button form-type="reset">重置</button>
</form>
open-type 的合法值
| 值 | 說明 |
|---|---|
| contact | 打開客服會話，需要在微信小程序的后臺配置 (演示不了) |
| share | 觸發用戶轉發， |
| getPhoneNumber | 獲取用戶手機號，不是企業的小程序賬號 沒有權限來獲取用戶的手機號碼 (演示不了) |
| getUserInfo | 獲取用戶信息，可以從bindgetuserinfo回調中獲取到用戶信息 |
| launchApp | 打開APP 需要配合原生app (演示不了) |
| openSetting | 打開授權設置頁 |
| feedback | 打開“意見反饋”頁面，需要真機調試 |
 spring4.0 整合 Quartz 實現任務調度)
