1.微信小程序介紹
-
-
推廣app 或公眾號的成本太高。
-
開發適配成本低。
-
容易小規模試錯，然后快速迭代。
-
跨平台。
1.2. 微信小程序歷史
-
2016年1月11日，微信之父張小龍時隔多年的公開亮相，解讀了微信的四大價值觀。張小龍指出，越來越多產品通過公眾號來做，因為這里開發、獲取用戶和傳播成本更低。拆分出來的服務號並沒有提供更好的服務，所以微信內部正在研究新的形態，叫「微信小程序」 需要注意的是，之前是叫做 應用號
-
2016年9月21日，微信小程序正式開啟內測。在微信生態下，觸手可及、用完即走的微信小程序引起廣泛關注。騰訊雲正式上線微信小程序解決方案，提供小程序在雲端服務器的技術方案。
-
2017年1月9日，微信推出的“小程序”正式上線。“小程序”是一種無需安裝，即可使用的手機“應用”。不需要像往常一樣下載App，用戶在微信中“用完即走”。
-
-
信息傳達數達到450億，較去年增長18%;視頻通話4.1億次,增長100%
-
小程序覆蓋超過200+行業，交易額增長超過6倍，服務1000億+人次,創造出了5000億+的商業價值
1.4. 還有其他的小程序 不容忽視
-
支付寶小程序
-
百度小程序
-
QQ小程序
-
今日頭條 + 抖音小程序
1.5.2. 其他優秀的第三方小程序
-
拼多多
-
滴滴出行
-
歡樂斗地主
-
智行火車票
-
唯品會
-
。。。
開發微信小程序之前，必須要准備好相應的環境
2.1. 注冊賬號
建議使用全新的郵箱，沒有注冊過其他小程序或者公眾號的。
登錄，成功后可看到如下界面
然后復制你的APPID,悄悄的保存起來，不要給別人看到。
微信小程序自帶開發者工具，集 開發 預覽 調試 發布 於一身的 完整環境。
但是由於編碼的體驗不算好，因此 建議使用 vs code + 微信小程序編輯工具 來實現編碼
vs code 負責敲代碼，微信編輯工具 負責預覽。
注意 第一次登錄的時候 需要掃碼登錄
小程序框架的目標是通過盡可能簡單、高效的方式讓開發者可以在微信中開發具有原生 APP 體驗的服務。
小程序框架提供了自己的視圖層描述語言 WXML 和 WXSS，以及 JavaScript，並在視圖層與邏輯層間提供了數據傳輸和事件系統，讓開發者能夠專注於數據與邏輯。
注意：配置文件中不能出現注釋。
{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } }
-
pages字段 —— 用於描述當前小程序所有頁面路徑，這是為了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄。 -
window字段 —— 定義小程序所有頁面的頂部背景顏色，文字顏色定義等。 -
完整的配置信息請參考 app.json配置
這里的 page.json 其實用來表示頁面目錄下的 page.json 這類和小程序頁面相關的配置。
開發者可以獨立定義每個頁面的一些屬性，如頂部顏色、是否允許下拉刷新等等。
頁面的配置只能設置 app.json 中部分 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window
<view> {{ message }} </view>
Page({ data: { message: 'Hello MINA!' } })
<view id="item-{{id}}"> </view>
Page({ data: { id: 0 } })
不要直接寫 checked="false"，其計算結果是一個字符串
<checkbox checked="{{false}}"> </checkbox>
<view hidden="{{flag ? true : false}}"> Hidden </view>
<view> {{a + b}} + {{c}} + d </view>
Page({ data: { a: 1, b: 2, c: 3 } })
<view wx:if="{{length > 5}}"> </view>
<view>{{"hello" + name}}</view>
Page({ data:{ name: 'MINA' } })
項的變量名默認為 item wx:for-item 可以指定數組當前元素的變量名
下標變量名默認為 index wx:for-index 可以指定數組當前下標的變量名
wx:key 用來提高數組渲染的性能
wx:key 綁定的值 有如下選擇
list:[{id:0,name:"炒飯"},{id:1,name:"炒面"}]
wx:key="id"
2.
list:[1,2,3,4,5]
wx:key="*this"
<view wx:for="{{array}}" wx:key="id"> {{index}}: {{item.message}} </view>
Page({ data: { array: [{ id:0, message: 'foo', }, { id:1, message: 'bar' }] } })
<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
<view wx:if="{{false}}">1</view> <view wx:elif="{{true}}">2</view> <view wx:else>3</view>
<view hidden="{{condition}}"> True </view>
頻繁切換 用 hidden
不常使用 用 wx:if
小程序中綁定事件，通過bind關鍵字來實現。如 bindtap bindinput bindchange 等
不同的組件支持不同的事件，具體看組件的說明即可。
<input bindinput="handleInput" />
Page({ // 綁定的事件 handleInput: function(e) { console.log(e); console.log("值被改變了"); } })
1.
<input bindinput="handleInput(100)" />
2.
<input bindinput="handleInput" data-item="100" />
3.事件觸發時獲取數據
handleInput: function(e) { // {item:100} console.log(e.currentTarget.dataset) // 輸入框的值 console.log(e.detail.value); }
與 CSS 相比，WXSS 擴展的特性有：
-
-
樣式導入
使用步驟：
-
確定設計稿寬度 pageWidth
-
計算比例
750rpx = pageWidth px,因此1px=750rpx/pageWidth。 -
在less文件中，只要把設計稿中的
px=>750/pageWidth rpx即可。
wxss中直接就支持，樣式導入功能。
也可以和 less中的導入混用。
使用@import語句可以導入外聯樣式表，只支持相對路徑。
示例代碼：
/** common.wxss **/ .small-p { padding:5px; }
/** app.wxss **/ @import "common.wxss"; .middle-p { padding:15px; }
*{ margin:0; padding:0; box-sizing:border-box; }
目前支持的選擇器有：
-
-
安裝插件
easy less
3. 在vs code的設置中加入如下，配置
"less.compile": { "outExt": ".wxss" }
https://developers.weixin.qq.com/miniprogram/dev/component/
重點講解小程序中常用的布局組件
<view hover-class="h-class">
點擊我試試
</view>
-
-
只能嵌套text
-
長按文字可以復制（只有該標簽有這個功能）
-
可以對空格 回車 進行編碼
<text selectable="{{false}}" decode="{{false}}">
普 通
</text>
-
-
支持懶加載
mode 有效值：
mode 有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。
默認寬度 100% 高度 150px
滑塊視圖容器。
導航組件 類似超鏈接標簽
open-type 有效值：
代碼
// 1 index.wxml 加載 節點數組 <rich-text nodes="{{nodes}}" bindtap="tap"></rich-text> // 2 加載 字符串 <rich-text nodes='<img src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.png" alt="">'></rich-text> // index.js Page({ data: { nodes: [{ name: 'div', attrs: { class: 'div_class', style: 'line-height: 60px; color: red;' }, children: [{ type: 'text', text: 'Hello World!' }] }] }, tap() { console.log('tap') } })
文本節點：type = text
-
-
rich-text組件內屏蔽所有節點的事件。 -
attrs屬性不支持 id ，支持 class 。 -
name屬性大小寫不敏感。 -
如果使用了不受信任的
HTML節點，該節點及其所有子節點將會被移除。 -
img標簽僅支持網絡圖片。
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" > default </button>
size 的合法值
type 的合法值
form-type 的合法值
open-type 的合法值
-
-
登錄微信小程序官網，添加
客服 - 微信 -
為了方便演示，我自己准備了兩個賬號
-
普通用戶 A
-
客服-微信 B
-
-
就是干！
js
Page({ data: { iconSize: [20, 30, 40, 50, 60, 70], iconType: [ 'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear' ], iconColor: [ 'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple' ], } })
wxml
<view class="group"> <block wx:for="{{iconSize}}"> <icon type="success" size="{{item}}"/> </block> </view> <view class="group"> <block wx:for="{{iconType}}"> <icon type="{{item}}" size="40"/> </block> </view> <view class="group"> <block wx:for="{{iconColor}}"> <icon type="success" size="40" color="{{item}}"/> </block> </view>
可以通過 color屬性來修改顏色
myHeader.json
{ "component": true }
同時，還要在組件的 wxml 文件中編寫組件模板，在 wxss 文件中加入組件樣式。
slot表示插槽，類似vue中的slot
myHeader.wxml
<!-- 這是自定義組件的內部WXML結構 -->
<view class="inner">
{{innerText}}
<slot></slot>
</view>
/* 這里的樣式只應用於這個自定義組件 */ .inner { color: red; }
myHeader.js
Component({ properties: { // 這里定義了innerText屬性，屬性值可以在組件使用時指定 innerText: { // 期望要的數據是 string類型 type: String, value: 'default value', } }, data: { // 這里是一些組件內部數據 someData: {} }, methods: { // 這里是一個自定義方法 customMethod: function(){} } })
{ // 引用聲明 "usingComponents": { // 要使用的組件的名稱 // 組件的路徑 "my-header":"/components/myHeader/myHeader" } }
<view>
<!-- 以下是對一個自定義組件的引用 -->
<my-header inner-text="Some text">
<view>用來替代slot的</view>
</my-header>
</view>
-
-
子組件通過事件的方式向父組件傳遞參數
-
父組件 把數據
{{tabs}}傳遞到 子組件的tabItems屬性中 -
父組件 監聽
onMyTab事件 -
子組件 觸發
bindmytap中的mytap事件-
自定義組件觸發事件時，需要使用
triggerEvent方法，指定事件名、detail對象
-
-
父 -> 子 動態傳值
this.selectComponent("#tabs");
父組件代碼
// page.wxml <tabs tabItems="{{tabs}}" bindmytap="onMyTab" > 內容-這里可以放插槽 </tabs> // page.js data: { tabs:[ {name:"體驗問題"}, {name:"商品、商家投訴"} ] }, onMyTab(e){ console.log(e.detail); },
子組件代碼
// com.wxml <view class="tabs"> <view class="tab_title" > <block wx:for="{{tabItems}}" wx:key="{{item}}"> <view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view> </block> </view> <view class="tab_content"> <slot></slot> </view> </view> // com.js Component({ properties: { tabItems:{ type:Array, value:[] } }, /** * 組件的初始數據 */ data: { }, /** * 組件的方法列表 */ methods: { handleItemActive(e){ this.triggerEvent('mytap','haha'); } } })
-
-
屬性的方式 也是要中划線的方式
-
其他情況可以使用駝峰命名
-
組件的文件名如
myHeader.js的等 -
組件內的要接收的屬性名 如
innerText
-
