微信小程序 快速(学习/参考)
微信小程序 快速(學習/參考)
小程序與公眾號的區(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> 相當于divtext
<text> <text> 相當于spanbutton
<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ù)設備尺寸自動換算分辨率
| 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是bindnameutil模塊化的使用
把一些公共的代碼單獨抽至一個單獨的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內容(可能不重要)
| 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 是否解碼 默認falserich-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 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.htmlopen-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的合法值
| 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> 會把遠程的頁面放到微信程序里邊運行總結
以上是生活随笔為你收集整理的微信小程序 快速(学习/参考)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: CEO,CTO,COO,CFO,CIO首
- 下一篇: 超像素论文(三)——AINet: Ass