微信小程序 快速(學習/參考)

小程序與公眾號的區(qū)別

1.定位不同：公眾號定位服務與信息傳遞，小程序面向產(chǎn)品與服務。

2.技術實現(xiàn)區(qū)別：公眾號基于H5(vue/react/angular/ionin等)，小程序基于自身開發(fā)環(huán)境與開發(fā)語言(某些第三方框架也能將vue打包成小程序環(huán)境)。

3.用戶體驗不同(小程序用戶體驗要比HTML5好,更接近原生app)

4.調用原生能力的不同(公眾號可借助jssdk調用手機的攝像頭,調用掃描二維碼等,能力有限.小程序調用原生的能力強大,幾乎能實現(xiàn)所有app能實現(xiàn)的功能)(調用原生的能力強,可不開發(fā)app.)

5.微信app入口不同

MINA框架介紹

MINA is not app 是微信開發(fā)小程序的框架，其目的是通過盡可能簡單、高效的方式讓開發(fā)者在微信中體驗到接近原生的服務。

MINA提供自己的視圖層描述語言xwml和wxss，以及基于javascript的邏輯層框架。并在視圖層和邏輯層之間提供數(shù)據(jù)傳輸和事件系統(tǒng)，可讓開發(fā)者方便聚焦于數(shù)據(jù)與邏輯上。

MINA的核心是一個相應數(shù)據(jù)綁定系統(tǒng)

系統(tǒng)分為視圖層和邏輯層

MINA可讓數(shù)據(jù)與視圖保持同步非常簡單。當做數(shù)據(jù)修改的時候，只需修改邏輯層數(shù)據(jù)，視圖層就會相應更新

MINA是騰訊給微信小程序命名的框架，其實際上應用的是最推寵的MVVN模式

創(chuàng)建typescript項目

typescript本身就是編譯成js的，所以在微信小程序同時生成js與ts文件，手動點擊編譯就會把ts編譯成js文件

新建一頁面

根目錄app.json文件

{"pages":["pages/news/news", 在此寫上新頁面路徑保存，編輯器會自動創(chuàng)建文件"pages/index/index"] }

微信的標簽

無ul li，成對出現(xiàn)

view

<view> </view> 相當于div

text

<text> <text> 相當于span

button

<button size="mini" bindtap="go"></button> size設置按鈕大小，給按鈕綁定點擊事件，執(zhí)行方法時不加()

數(shù)據(jù)綁定

for遍歷

<view wx:for="{{list}}">{{index}}---{{item}} <view> 微信默認每個遍歷的數(shù)據(jù)賦值給item， 索引賦值給index ------------- 嵌套循環(huán) <view wx:for="{{list}}">{{item.cart}}<view wx:for="{{item.reg}}">{{item}}<view> <view> list:[{cart:"cart1",reg:["v1","v2"]},{cart:"cart2",reg:["g1","g2"]} ] ------------- 自定義循環(huán)賦值的名字 <view wx:for="{{list}}" wx:for-index="i" wx:for-item="m">{{i}} --{{m}} <view> 注意 i 與 m 不加 {{}}

if隱藏

<view wx:if="{{flag}}"></view>

綁定屬性

<view data-aid="{{user}}"></view> 微信綁定屬性不需要加:或是[]

綁定單選按鈕

<checkbox checked="{{false}}"></checkbox>

雙向綁定

data:{user:123 } go(){var go=this.data.usergo++;this.setData({user:go}) }

獲取元素html

<button bindtap="gethtml" data-id="456">獲取按鈕HTML<button>gethtml(e){ e為該事件e.target.dataset.id 獲得元素自定義屬性的值 }

微信小程序樣式/屬性綁定，元素隱藏

隱藏元素類似angular

<view hidden="{{yes}}"></view> page({data:{yes:true} })

class綁定

<view class="test {{isavtive ? 'active':''}}"></view> page({data:{isavtive:true} })

樣式綁定

<view style="display:{{isdis}}"></view> page({data:{isdis:"none" block/flex} })

for循環(huán)與自定義屬性搭配無法獲取值

<view bindtap="go" wx:for="{{list}}" wx:key="index" data-id="123"></view> page({data:{list:[...]},go(e){e.target 與for在同一元素內data-id無效} })

非冒泡事件

<view bindtap="go1"> 點擊1觸發(fā)1<view catchtap="go2"> 點擊2，觸發(fā)2<view bindtap="go3"> 點擊3，觸發(fā)3,2 2為阻止冒泡事件，所以3被阻止</view></view> </view>

touch冒泡的解決辦法

微信小程序的touch事件

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#%E4%BA%8B%E4%BB%B6%E8%AF%A6%E8%A7%A3

使用catchtouch只能阻止向上冒泡，不能阻止子元素的冒泡

根據(jù)冒泡觸發(fā)的元素有規(guī)律可尋

<view class='message' capture-catch:touchstart="clear" data-id="1"><view class='nav' catchtap="go" data-id="2"><button wx:for="{{nav}}" wx:key="index">{{item.title}}</button></view> </view> 此時滑動元素message，會向下冒泡觸發(fā)元素nav， clear(e){var id=e.target.dataset.id 滑動message、nav都會觸發(fā)clear，但可根據(jù)他們的屬性判斷，觸發(fā)來自哪個元素if(id=="1"){父元素}else if(id=="2"){子元素} }

Tabbar底部導航欄

導航欄最少兩個，最多五個，寫到根目錄app.json

{"tarBar":{"custom":true,"color":"#fff", 按鈕的字體顏色"selectedColor":"#000", 點擊后的字體顏色"backgroundColor":"#eee", 整個底部導航欄的背景顏色"borderStyle":"black/white", 底部導航框上邊框顏色，僅支持白色和黑色"position":"top/bottom" top跑到最上邊"list":[{"pagePath":"路由路徑","text":"首頁","iconPath":"圖片路徑","selectedIconPath":"被點擊后的圖片路徑"},{"pagePath":"路由路徑","text":"我的","iconPath":"圖片路徑", 當position為top時，"selectedIconPath":"被點擊后的圖片路徑"}],suingComponents:{}} }

組件跳轉+配置當前頁面標題

<button bildtap="show">跳轉</button> show(){wx.navigateTo({url:"../login/login"}) }

組件的json文件中配置當前頁面標題

{"navigationBarTitleText":"當前組件標題名稱","navigationBarBackgroundColor": "#000000","navigationBarTextStyle": "white" }

跳轉傳值

<view wx:for="{{list}}"><button size="mini" bindtap="goparams" data-id="{{index}}">跳轉傳參</button> </view> goparams(e){ 因為函數(shù)不能加括號傳值所以用自定義屬性傳值var id=e.target.dataset.idwx.navigateTo({url:"../login/login?id="+id}) } ---------login組件--------- 獲取頁面?zhèn)鬟^來的值 onLoad:function(options){console.log(options) 打印結果 {id:xxx} }

微信發(fā)送請求

wx.request({url:"http://",data:{ 參數(shù)不一定都寫成對象user:"",pass:""},method:"get/post", 默認getheader:{"content-type":"application/json" 這是微信默認的請求頭}，success:(res)=>{console.log(res.data)} })

微信wxss自定義的字體、圖片單位

在app項目中，一般以rem為單位

在微信中，可用rpx為單位，微信小程序會根據(jù)設備尺寸自動換算分辨率

設備rpx換算pxpx換算rpx

iphone5	1rpx=0.43px	1px=2.34rpx
iphone6	1rpx=0.5px	1px=2rpx
iphone6 plus	1rpx=0.552px	1px=1.81rpx

說明

iphone 6 的屏幕分辨率為 750*1334 物理分辨率為 375 * 667 一般圖片分辨率設置成750px

微信小程序的圖片路徑問題

若圖片帶有http://127.0.0.1:5050/list/user\go=123 若路徑帶有\(zhòng)字符會被微信反編譯成其他字符，導致圖片路徑不能被識別

改變服務器端的路徑或客戶端修改

使用客戶端修改的方法

var row=res.data.list for(var r of row){r.url=r.url.replace(/\\/g,"/") 截取字符并替換//replace("\\","/") 若存在多個滿足條件的字符，也只能執(zhí)行一次 "gh\gh\ghg\"有多個\執(zhí)行到第一個就會停止 \\多加一\是反轉義字符，計算機里\是特殊符號，一般不被當做字符，使用\將其轉義為字符 正則表達式的g表示全局，會匹配字符下所有\(zhòng) }

路徑里邊的變量拼接

url="http://127.0.0.1:5050/" urls="nav/1.jpg" <image src="{{url}}{{urls}}"></image> 相當于url+urls

微信小程序swiper輪播組件

主要屬性

屬性描述

indicator-dots=“true”	是否顯示導航指示點
autoplay=“true”	是否自動東方播放
interval=“5000”	自動播放間隔時間
duration=“1000”	上一張圖切換至下一張圖所用時長
circular=“true”	是否無縫鏈接

示例

<swiper class='u-wrp-bnr' indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true'><block wx:for="{{bnrUrl}}" wx:for-index="index"><swiper-item><image src='{{item.url}}' class='u-img-slide' mode='aspectFill'></image></swiper-item></block> </swiper> ----------js----- Page({data: {"bnrUrl": [{"url": "img/1242x366-1531449084.jpg"}, {"url": "img/1242x366_djj_0706-1530871651.jpg"}, {"url": "img/1242x366_lyx_0709-1531122892.jpg"}, {"url": "img/14540040236323_1_o.jpg"}]} }); autoplay/interval等也可綁定變量后臺操作

微信上拉加載刷新

使用微信內置方法

全局app.json文件 {"enablePullDownRefresh":true, 開啟全局的下拉刷新事件，若上拉刷新則不用"onReachBottomDistance":50 頁面上拉觸底事件觸發(fā)時距離頁面底部的距離 50為默認值，單位px } 組件 page({onReachBottom(){} })

使用scroll-view標簽

scroll-view必須得給定高度，不然沒法實現(xiàn)滾動

scroll-view屬性詳情

屬性默認說明

scroll-x	false	是否允許水平滾動
scroll-y	false	是否允許垂直滾動
upper-threshold	50(number/string)	觸發(fā)scrolltoupper事件的頂部/左邊距離
lower-threshold	50(number/string)	觸發(fā)scrolltolower事件的底部/右邊距離
scroll-top	number/string	設置垂直滾動位置
scroll-left	number/string	設置水平滾動位置
scroll-width-animation	false	設置滾動位置后，是否顯示滾動效果

scroll-view事件

事件說明

bindscrolltoupper	滾動到頂部/左邊時觸發(fā)
bindscrolltolower	滾動到底部/右邊時觸發(fā)
bindscroll	只要處于滾動狀態(tài)就會觸發(fā)

實例，解決重復請求，this指向問題,數(shù)據(jù)到底關閉問題

調用系統(tǒng)信息官方文檔

https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html

-------------wxml------------- <scroll-view style="height:{{height}}px" scroll-y bindscrolltolower="getdata">......... </scroll-view> -------------js------------- page({data:{height:"400",info:true,list:[]}onLoad(options){wx.getSystemInfo({ 調用系統(tǒng)信息success:(res)=>{this.setData(height:res.windowHeight 獲取設備高度)}})},quest(){this.setData({info:false})var that=this 解決下邊f(xié)unction的指代問題，wx.request({url:"...",succedd:function(res){if(res.data.length<10){var fl=false}else{var fl=true}var list=that.data.listlist=list.concat(res.data)that.setData({list:list,info:fl 防止網(wǎng)絡慢出現(xiàn)重復請求})})},getdata(e){if(this.datainfo){this.quest()}} })

微信小程序解析HTML代碼

將普通的HTML代碼片段解析為微信小程序標簽

使用web-view標簽

是一個可用于承載頁面的容器，會自動補滿小程序頁面

但web-view不支持個人類型和海外類型的小程序

<web-view src="https://.."></web-view>

使用wxParse

github搜索wxParse 選擇icindy/wxParse下載即可

將wxParse項目目錄下的wxParse文件拷貝到自己項目根目錄

引入主要文件

var wxparse=require("../../wxParse/wxParse.js") 在要使用的wxss中引入 也可在app.wxss @import "/wxParse/wxParse.wxss"

數(shù)據(jù)綁定

var article="<div>HTML片段</div>" var that=this wxParse.wxParse("article","html",article,that,5) 對應順序解釋為 bindname綁定的數(shù)據(jù)名 type輸入的數(shù)據(jù)類型，html或md target指page對象，一般為this imagepadding 若當前片段為圖片，設置圖片的左右內邊距值，默認為0

前臺渲染

<import src="...../wxParse/wxParse.wxml"/> 在要使用的wxml中引入 <view><template is="wxParse" data="{{wxParse.wxParseData:article.nodes}}"/> </view> wxParseData中的article是bindname

util模塊化的使用

把一些公共的代碼單獨抽至一個單獨的js文件中，作為一個模塊，必須通過module.export或exports 暴露才能被外只用

自定義模塊

在根目錄util文件夾中新建一個js文件,在該文件中

var myapp={host:"http://127.0.0.1:5050", 封裝公共域名getdata(){return this.host} } module.exports=myapp 將本文件暴露

引入模塊

var config=require("../../util/*.js") console.log(config)

app.js全局數(shù)據(jù)

根目錄app.js文件中

app({globalData:{user:"nice"},getdata(){return "kcone"} })

要調用數(shù)據(jù)的組件

var app=getApp() 獲取實例 app.getdata() 打印 kcone app.globalData.user 打印 nice globalData與自定義的方法都是一樣的地位，不局限于此

微信wxs腳本語言的使用

wxs是微信小程序的一套腳本語言，結合wxml可構建出頁面的結構

wxs中不可調用其他js文件的方法，不可調用微信小程序api

wxs不可作為組件的事件回調

不可用()=>{} 不可用 const 聲明時間new Date() 變成 getDate()

類似于js，但wxs有自己的一套方法，方法名字可能不同，具體請參考

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/

創(chuàng)建 在微信開發(fā)者工具右鍵創(chuàng)建選擇wxs即可

mywxs.wxs var user="kcone" var getdata=function(e){return e } module.exports={user:user,getdata:getdata } module.export.msg="what is you name"

wxml文件

<view> {{sky.msg}}</view> 這樣是會報錯的，還沒導入就使用 <wxs src="./mywxs.wxs" module="sky"></wxs> 將引入的數(shù)據(jù)傳給sky <view> {{sky.getdata(sky.user)}}</view> bindtap點擊事件函數(shù)不能加括號在此可行 <view>{{sky.msg}}</view>

自定義組件

組件可將公共的功能封裝起來，方便其他地方使用

可擴展HTML應用的不足

創(chuàng)建一個組件

微信開發(fā)工具在選定的目錄下右鍵選擇component即可，此方式只創(chuàng)建四個對應組件(wxml/wxss/json/js)文件，不創(chuàng)建文件夾。

組件的js中為component 與vue類似

br.js component({data:{... 組件數(shù)據(jù)},methods:{... 存放方法},properties:{... 存放屬性} }) br.wxml <view class="br"></view> br.wxss .br{height:200rpx; } br.json ...

在需要用到組件的json文件下聲明要引用的組件

---------**.json------- {"usingComponents":{"br":"組件的路徑", name為組件定義的名字"search":"../search/search" 可引入多個組件} } ----------**.wxml--------- <br/> 即可引用 <br></br> 也可使用雙標簽

組件傳值

父組件傳值

父組件 <header title="{{user}}" type="{{list}}" value="{{value}}" fun="{{func}}"></header> 給子組件綁定一個屬性 子組件js component({data:{user:"kcone",num:0},properties:{title:string, 簡化定義/*title:{ 詳細的定義法type:string, 數(shù)據(jù)類型/string/number...value:"設置數(shù)據(jù)默認值",observer:()=>{} 處理邏輯type/value/observer都是內置屬性，不可自行更改}*/}，methods:{ component數(shù)據(jù)操作和page一樣add:(){var num=this.data.numnum:num+1this.setData({num:num})var user=this.data.userreturn user}} })

父組件調用子組件方法

調用子組件時定義id

--------子組件js----------- component({data:{list:[...]},methods:{add(){}} }) --------父組件wxml-------- <header id="header"><header> ---------父組件js--------- var header=this.selectComponent("#header") header.add() header.data.list 調用子組件數(shù)據(jù)

子組件調用父組件方法

---------父組件wxml----------- <header bind:futher="myfuther"></header> :可加,可不加 ---------父組件js----------- page({data(){},myfuther(){return "kcone"} }) ---------子組件js-------------- component({properties:{},methods:{go(){this.triggerEvent("futher","傳入的參數(shù)",set) 如有嵌套關注set}} })

子組件調用父組件set內容(可能不重要)

set默認值描述

bubbles	false	事件是否冒泡
composed	false	事件是否可穿越組件邊界，為false時， 事件只能在引用組件節(jié)點樹上觸發(fā) 不進入其他任何組件內部
capturePhase	false	z組件是否擁有可捕獲階段

slot的使用

在組價wxml提供一個slot節(jié)點，用于承載組件引用時提供的子節(jié)點

component.wxml

------子組件header----- <view>****組件頁面</view> </slot></slot>

page.wxml

<header><button>父組件按鈕<button> 父組件引用子組件，并向其篩入一個按鈕 </header>

自定義Toast組件

子組件wxml

<view class='futher' hidden="{{info}}"><view class='son'>{{message}}</view> </view>

子組件wxss

.futher{position:fixed;top:0; bottom:0;left:0;right:0;表示元素水平垂直居中 flex元素內容水平垂直居中 } .son{text-align:center;line-height:120%;padding:34rpx 50rpx; 子元素靠內邊距撐起 字體背景顏色等省略max-width:70%;min-width:35%; 有最大最小寬}

子組件js

Component({data: {info:true,message:""},methods: {gets(e){this.setData({info:false,message:e})setTimeout(() => {this.setData({info: true})}, 1000)}}})

父組件

<toast id="mytoast"></toast> <button bindtap='text' size='mini'>toast彈窗</button>text(e?:any){var toast:any=this.selectComponent("#mytoast")toast.gets("hello")},

微信交互(提示窗口/確認窗/加載窗/底部彈窗)

wx.showToast

wx.showToast({title:"文字顯示內容",icon:"none/success/loading", 無圖標/打鉤/加載圓duration:1000,image:"圖片路徑", 自定義圖標的路徑，優(yōu)先級高于iconmask:false, 是否顯示遮罩層，默認falsesuccess:()=>{},fail:(e)=>{e.errMsg},complete:()=>{} }) /*setTimeout(()=>{wx.hideToast() 也可使用hideToast使其關閉 },1000)*/

wx.showModal() 確認窗口

wwx.showModal({title:"標題內容",content:"提示內容",showCancel:true, 是否顯示曲線按鈕，默認falsecancelText:"", 取消按鈕文字內容，最多4字符cancelColor:"#fff", 取消按鈕顏色confirmText:"", 確定按鈕文本內容，最多4字符confirmColor:"#fff", 確定按鈕顏色success:(res)=>{res.confirm true為用戶確定，false為用戶取消，confirm與cancel相反res.cancel} })

wx.showLoading 加載窗口

wx.showLoading({title:"標題", mask:false, 是否顯示遮罩層success:()=>{},fail:(e)=>{e.errMsg}，complate:()=>{} //無論成功失敗都加在 }) setTimeout(()=>{wx.hideLoading() 需手動關閉 },1000)

wx.showActionSheet() 底部顯示窗口

wx.showActionSheet({itemList:["a","b","c"],itemColor:"",success:(e)=>{e.tapIndex 用戶點擊按鈕返回的索引 }, }) 只要點擊按鈕就會自動關閉

微信小程序內置組件

swiper 輪播組件

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

屬性

屬性類型默認值說明

indicator-dots	boolean	false	是否顯示導航圓點
indicator-color	color	rgba(0,0,0,0.3)	導航圓點顏色
indicator-active-color	color	#fff	導航點被選中的顏色
autoplay	boolean	false	是否自動播放
current	number	0	當前滑塊的索引
interval	number	5000	自動播放時間間隔
duration	number	500	切換至下一張圖的時間
circular	boolean	false	是否使用鏈接滑動
vertical	boolean	false	滑動方向是否為垂直
previous-margin	string	0px	前邊距，可看成margin-left/top
next-margin	string	0px	后邊距,可看成margin-right/bottom

事件

事件描述

bindchange	滑動輪播就會觸發(fā)
bindtransition	滑動動畫開始觸發(fā)
bindanimationfinish	滑動動畫結束觸發(fā)

實例

<swiper indicator-dots="true" autoplay="true" interval="3000" duraction="800" circular="true"><block wx:for="{{list}} wx:key="index"><swiper-item><image src="{{item.src}}"></image><swiper-item><swiper-item><image src="{{item.src}}"></image><swiper-item></block> </swiper>

video 視頻媒體標簽

https://developers.weixin.qq.com/miniprogram/dev/component/video.html

<video src="http://" controls="true" event-model="buble" id="myvideo"></video> controls 是否使用微信自帶播放控件 page({var myvideo=wx.createVideoContent("#myvideo") 獲取視頻元素myvideo.play() 播放視頻myvideo.pause() 停止播放 })

cover-view

是覆蓋在原生組件上的文本視圖，可覆蓋的原生組件包括map/video/canvas/camera等，有些類似position的z-index，cover-view是覆蓋在視圖之上的

實例自定義視頻播放控件

<video src="..."> <cover-view> 要覆蓋到視頻視圖之上，得在video標簽內<cover-image></cover-image> 支持嵌套cover-view/cover-image/button<button><button><cover-view></cover-view></cover-view> </video>

微信基礎內容

icon 圖標

屬性類型說明

type	string(該屬性不可空)	值有success/info/warn/waiting/cancel/download//search/clear success_no_circle
size	number/string(默認23)	icon的大小
color	string	支持css3的顏色格式

實例

演示圖 https://res.wx.qq.com/wxdoc/dist/assets/img/icon.d50f3532.png

<icon type="success" size="22" color="#fff"></icon>

text 文本標簽

<text selectable="false" space="false" decode="false" ></text> selectable 文本是否可選 默認false space 是否顯示連續(xù)空格 string類型 默認false decode 是否解碼 默認false

rich-text

將html標簽解析為微信標簽

<rich-text nodes="{{nodes}}"></rich-text> page({data:{nodes:{ 值可為數(shù)組，也可為字符串 "<div><span></span><div>"[{name: 'div',attrs: {class: 'div_class',style: 'line-height: 60px; color: red;'},children: [{type: 'text',text: 'Hello&nbsp;World!'}]}]}} })

progress 進度條

屬性類型默認值說明

percent	number		0~100百分比
show-info	boolean	false	是否顯示右側進度條百分比
border-radius	number/string	0	圓角
font-size	number/string	16	百分比字體大小
stroke-width	number/string	6	進度條高度
color	string	#09BB07	百分比顏色
activeColor	string	#09BB07	選擇的進度顏色
active		false	c出現(xiàn)從左到右的動畫

實例

<progress percent="30" color="#fff" show-info bindactiveend="{{end}}"/> bindactiveend 進度加載完成后觸發(fā)事件

表單組件

input

https://developers.weixin.qq.com/miniprogram/dev/component/input.html

屬性

類型列括號內為默認值

屬性名類型描述

value	string	輸入框里的初始值
type	string(text) text/number/idcard/digit	iinput的類型 從左到右為 文本/數(shù)字/身份證/帶小數(shù)數(shù)字
password	Boolean(false)	是否為密碼類型
placeholder	string	占位符
placeholder-style	string	指定占位符樣式
placeholder-class	string(input-placeholder)	指定占位符樣式類
disabled	Boolean(false)	是否禁用
maxlength	number(140)	指定最大字符串長度,為-1時無限制
focus	boolean(false)	是否自動獲得焦點
confirm-type	string(send/search/next/go/done)	設置右下角鍵盤文字 發(fā)送/搜索/下一個/前往/完成
confirm-hold	boolean(false)	d點擊鍵盤右下角按鈕是否保持不收起

事件

事件說明

bindinput	只要輸入內容就會觸發(fā)(e.value/e.cursor/keyCode鍵值)
bindfocus	輸入框聚焦事件(value/height鍵盤高度)
bindblur	失去焦點事件
bindconfirm	點擊完成按鈕觸發(fā)，也就是confirm-type值為done

button

屬性

屬性類型:值(默認值)描述

size	string:default/size(default)	按鈕大小 默認/迷你
type	string:primary/default/warn(default)	按鈕樣式 綠色/紅色/白色
plain	Boolean(false)	按鈕是否鏤空,背景色透明
disabled	Boolean(false)	是否禁用
loading	string	字符前是否帶有l(wèi)oading圖標
form-type	string:submit/reset	對form組件有效,點擊觸發(fā)submit/reset事件
open-type	string	微信開放能力
app-parameter	string	打開app時，向app傳遞的參數(shù)，open-type="launchApp"時有效

微信開發(fā)能力

open-type=“值”

值說明

contact	打開客服會話,若用戶在會話中消息卡片返回小程序,可從bindcontact回調或得信息
share	觸發(fā)用戶轉發(fā) https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95
getPhoneNumber	獲取用戶手機號，從bindgetphonenumber回調中獲取用戶信息
getUserInfo	獲取用戶信息，bindgetuserinfo中得到
launchApp	打開app，通過app-parameter屬性設定傳向app的參數(shù)
openSetting	打開授權設置頁
feedback	打開意見反饋頁面

事件

事件說明

bindgetuserinfo	該按鈕被點擊返回用戶信息,回調數(shù)據(jù)detail與wx.getUserInfo一致 僅當type=“getUserInfo” 有效
bindcontact	客服消息回調,僅當open-type=“contact” 有效
bindgetphonenumber	獲取用戶手機回調,open-type=“l(fā)aunchApp” 時有效
binderror	使用開放能力發(fā)生錯誤的回調,open-type="launchApp"有效
bindopensetting	打開授權設置后執(zhí)行的回調,open-type=openSetting有效
bindlaunchapp	打開app成功執(zhí)行的回調,open-type="launchApp"有效

checkbox checkbox-group 多選按鈕

checkbox屬性

屬性類型:值(默認值)描述

value	string	用于標識checkbox 類似
disabled	boolean:(false)	是否禁用
checked	boolean:(false)	當前CheckBox的選擇狀態(tài)
color	color:(#09bb07)	check的顏色

實例

<checkbox-group bindchange="change"> 多項選擇器，內部由多個checked組成<label wx:for="{{list}}"> 用for綁定對應標簽id也可嵌套該標簽里邊，內部有多個標簽的時候默認觸發(fā)第一個，可綁定的控件有button/checkbox/radio/switch<checkbox value="{{item.name}}" chacked="{{item.checked}}">{{item.title}}</checkbox></label> </checkbox-group> page({data:{list:[{name:"1",checked:false,title:"男"}, {name:"2",checked:false,title:"女"},{name:"3",checked:false,title:"保密"}]},change(e){ e.detail.value 返回當前被選定的數(shù)組,["1","2"]} })

radio 單選按鈕

屬性與checkbox一致

實例

<radio-group bindchange="change"> 同chackbox-group<label wx:for="{{list}}" wx:key="index"><radio value="{{item.name}}" checked="{{item.check}}"></radio></label> </radio-group> page({data:{list:[{name:"1",checked:false,title:"男"}...]}change(e){e.detail.value} })

switch 開關

屬性

屬性類型:值(默認值)說明

checked	boolean:(false)	選中狀態(tài)
disabled	boolean:(false)	是否禁用
type	string:switch/checkbox(switch)	開關的樣式
color	color:(04be02)	switch的顏色
bindchange		選中狀態(tài)發(fā)生改變就會觸發(fā)

實例

<view><switch bindchange="channge"></switch> </view> change(e){e.detail.value 當前按鈕的點擊狀態(tài) }

form

所有表單標簽的父標簽,微信可用form,但vue/angular不推薦用form表單,提交表單會有默認的刷新事件,微信無需阻止

實例

<fomr bindsubmit="submit" bindreset="reset"><input name="user"></input> 注意表單組件要定義name名稱,提交要用<checkbox-group name="check"><checkbox></checkbox>...</checkbox-group><button form-type="submit">提交</button><button form-type="reset">重置</button> </form> submit(e){e.detail.value 獲取全部表單的值 } reset(){} 表單重置事件

picker

從底部彈起的標簽選擇器,有時間,日期,地區(qū)等

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

屬性

屬性類型/值(默認值)描述

mode	string:selector/multiSelector/time/date/region(selector)	選擇器的類型 普通/多項選擇器/時間/日期/省份
disabled	boolean(false)	是否禁用
bindcancel	event	取消選擇觸發(fā)的事件

普通選擇器

屬性類型:值(默認值)描述

range	array/objectarray(array)	mode為selector或multiSelector時,range有效
rang-key	string	若range為數(shù)組對象時,通過range-key制定object中key的值 作為選擇器顯示內容
value	number	range值的索引
bindchange	event	value改變觸發(fā)的事件

實例

<picker mode="selector" range="{{list}}" value="{{ids}}" bindcolumnchange="change"><view>觸發(fā)</view> 必須放置子標簽使其點擊才能觸發(fā)選擇器<view>你選擇的是{{list[ids]}}</view> </picker> page({data:{list:["北京","上海","廣州","天津","重慶"],ids:0},change(e){e.detail.value } })

多項選擇器

<picker mode="multiSelector" range={{list}} value="{{index}}" bindcange="change" bindcolumnchange="column"><view>選擇省份</view> </picker> page({data:{list:[["廣東","廣西","山東"],["廣州","深圳","汕頭"]], 多線選擇器數(shù)據(jù)必須以數(shù)組套數(shù)組的方式存在，數(shù)組里數(shù)據(jù)的個數(shù)與對應下標的個數(shù)一致index:[0,0]},change(e){ value改變時觸發(fā)e.detail.value value改變時觸發(fā)change},column(e){ 列改變時觸發(fā)var raw=e.detail.column 代表列var col=e.detail.value 代表列下對應的行，可看做表格的列與行間的布局var obj={list:this.data.list,index:this.data.index}if(raw==0){if(col==0){obj.list[1]=["廣州","深圳","汕頭"]}else if(col==1){obj.list[1]=["南寧","北海","博白"]}else if(col==2){obj.list=["太原","石家莊","青島"]}}this.setData(obj)} })

媒體組件

image

圖片縮放請參考

https://developers.weixin.qq.com/miniprogram/dev/component/image.html

圖片預覽

點擊圖片后進入一個背景內，可在該背景中左右滑動瀏覽多張圖片

<image src="..." bindtap="zoom"></image> zoom(){wx.perviewImage({current:"可能為絕對路徑", 當前顯示圖片的路徑url:["http","http"] 需預覽圖片的http連接列表}) }

camera

可自定義拍照頁面，默認是會調用系統(tǒng)自帶拍照組件

https://developers.weixin.qq.com/miniprogram/dev/component/camera.html

屬性

屬性類型:值(默認值)說明

mode	string:normal/scanCode(normal)	應用模式只有初始化有效,不可改變 scanCode好似無效
device-position	string:back/front(back)	選擇打開的攝像頭,前置/后置
flash	string:auto(auto)	auto自動/no開/off關
bindstop	event	攝像頭不正常退出時觸發(fā)
bindinitdone	event	相機完成初始化時觸發(fā)
frame-size	string:medium/small/large(medium)	指定相機的拍照幀數(shù)

實例

<camera device-position="back" flash="off" binderror="error" style="width:100%;height:600rpx;"> </camera> <button size="mini" bindtap="take">拍照</button> <button size="mini" bindtap="startrec">開始錄制</button> <button size="mini" bindtap="stoprec">停止錄制</button> <image wx:if="images" src="{{images}}"></image> <video wx:if="{{videos}}" src="{{videos}}"></video> data:{images:"",videos:""}, ctx:null, take(){this.ctx=wx.createCameraContext()this.ctx.takePhoto({quality:"high",success:(res)=>{this.setData({images:res.tempImagePath})}}) }, startrec(){this.ctx.startRecord({success:(res)=>{console.log("已開始錄制")}}) }, stoprec(res){this.ctx.stopRecord({success:(res)=>{this.setData({images:res.tempThumbPath,videos:res.tempVideoPath})}}) }, error(e){e.detail }

audio 音頻控件

https://developers.weixin.qq.com/miniprogram/dev/component/audio.html

屬性

屬性類型:值(默認值)描述

controls	boolean(false)	是否使用微信自帶播放控件
loop	boolean(false)	是否循環(huán)播放
poster	string	音頻的海報
name	string	默認控件的音頻名字,若未開啟控件該屬性無效
author	string	默認控件的音頻作者,未開啟控件無效
binderror	event:	音頻發(fā)生錯誤的事件e.detail={errMsg:MediaError.code} code表示錯誤碼:1資源被用戶禁止2網(wǎng)絡錯誤3解碼錯誤4不適合資源
bindplay	event	音頻開始/繼續(xù)播放時,觸發(fā)
bindpause	event	停止播放時觸發(fā)
bindtimeupdate	event	播放進度改變時觸發(fā)e.detail={currentTime,duration}
bindended	event	音頻播放結束時觸發(fā)

實例

<audio src='http://127.0.0.1:5050/chat/text.mp3' id="aud"></audio> <button bindtap="audstart">開始播放</button><button bindtap="audstop">暫停播放</button> page({data:{},onLoad(){this.ctx=wx.createAudioContext("aud")},ctx:null,audstart(){this.ctx.play()},audstop(){this.ctx.pause()} })

live-player 流視頻

通俗講就是視頻直播，微信平臺的；流視頻需要審核

https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html

open-data

展示開放數(shù)據(jù),可獲取用戶的數(shù)據(jù),如城市/性別/頭像等

有時無法獲得數(shù)據(jù)可能是由于用戶未填寫對應信息

https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

屬性

屬性類型:值(默認值)描述

type	string	聲明開放型數(shù)據(jù)類型
lang	string:en/zh_CN/zh_TW	使用何語言展示用戶數(shù)據(jù),type="user*" type的值以user開頭時有效 英文簡體中文/簡體英文

type的合法值

type的值說明

userNickName	用戶昵稱
userAvatarUrl	用戶頭像
userGender	用戶頭像
userCity	用戶所在城市
userProvince	用戶所在省份
userCountry	用戶所在國家
userLanguage	用戶使用語言

實例

<open-data type="groupName" open-gid="xxxxxx"></open-data> 還不知如何使用 <open-data type="userAvatarUrl"></open-data> <open-data type="userGender" lang="zh_CN"></open-data>

web-view

<web-view src="http://"></web-view> 會把遠程的頁面放到微信程序里邊運行

總結

以上是生活随笔為你收集整理的微信小程序 快速(学习/参考)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。