微信小程序

關於微信小程序
微信小程序是由微信團隊開發的搭建在微信平臺的一種應用
其原理就是app不放在本地,放在微信平臺上
他可以隨掃隨用,不用取消
微信小程序不僅僅是一個‘小程序’,他完全可以構建成一個完整的項目(原本是想起名應用號,後來ios不同意,改名小程序)。

更早的應用:輕應用(百度)、流應用(dcloud)
沒有成功的原因:1、網速的原因 2、html5的性能

小程序火的原因:1、網速快了 2、微信自定義了自己的文件格式,引入了類似於react或者react-native的理念,使用wxml和wxss來替代傳統的html和css

微信小程序有自己的市場,它和傳統的原生app和混合式app衝突不是很大,他適合低頻的項目


微信小程序的架構體系
微信小程序項目必須包含兩個文件app.js app.json
app.js 主要是小程序的實例化,你可以把它看成一個公共的js
app.json 主要是用來設置路徑以及配置導航欄的樣式

微信小程序中自定義了兩種格式代替html和css:wxml、wxss
wxml weixin marked language
wxcss wexin style sheet
來解決html性能的問題
類似頁面中的js都包含page()方法,用來實例對象

兩種機制:
小程序中引入同名機制,一個頁面下的文件只要同名,就自動關聯
先私有後共有的機制優先匹配當前頁面下的文件,若不存在,在匹配公共下的文件

基礎標籤
view:視圖標籤,相當於一個視圖標籤,相當於一個div標籤
text:文本標籤,準備用來輸入文本內容的
icon:圖標標籤(type | size | color)

導航標籤:navigator (url | options | redirect)
nagative默認有一個url屬性類似a標籤中的href 若要傳參可以使用onloadoptions的參數接收

小程序中事件綁定:1.bind 1.catch(前者允許事件冒泡,後者不允許時間冒泡)
touchstart touchcancel touchend tap longtap

數據綁定:
基礎類型的數據綁定:<text>{{info}}</text>
屬性組合數據綁定<text id="item-{{id}}">信息<text/>
布爾類型的數據綁定:<checkbox vaue="value" checked="{{true}}"></checkbox>
三元類型表達式數據綁定:<text {{flag?true:false}}></text>
數據類型的數據綁定:<text>{{num1+num2}}={{num1+num2}}</text>
字符串數據綁定:<text>{{“abc”+name}</text>
路徑的綁定計算:<text>{obj.abs}+{{Path[0]}}</text>

wx:for遍歷:在微信小程序中提供了類似於指令的方式來代替傳統的循環遍歷,wx:for 提供了兩個自帶參數
wx:if:在微信中使用vx:if來替代js中的條件語句else、elseif

模板:微信小程序中也有類似於vue模板的標籤template生成獨立的作用域 (name,is ,data)

引用:include import
import 往往和模板配合使用 ,有一個data的屬性,傳遞參數 @import
include 一般移入公共文件

小程序中底層mina框架來實現的

小程序的生命週期函數:
onload(opions):加載時候觸發
onReady:渲染完畢觸發
onShow:頁面顯示時候觸發
onHide:頁面隱藏式後觸發
onUnload:頁面卸載時候觸發
onPullDownRefresh:頁面下來時候觸發
onReachBottom:用戶上拉時候觸發
onShareAppMessge:點擊右上角分享時候觸發(往往return{title | 分享的標題,desc:分享的描述})

微信小程序的模塊化
推薦使用模塊化開發和其他模塊化基本一致 export exports

微信小程序的路由:navigateTo/navitateBack 去和返回

微信小程序api
大體分爲兩種:方法功能類 以及 硬件調用類
凡是在微信當中調用api都是wx開頭
http請求 wx.request默認是https協議

調用手機照相功能(chooseImage)、錄音(startRecord)

wx當中的儲存機制wx.setStorage()/wx.setStorageSync(KEY,DATA)

swiper: swiper-item

iscroll/scrolly:方向 會使swiper沒有回彈

audio

微信插件:
wxchart:只需要引入js import

weui簡介
weui小程序是專門爲小程序提供的一套ui組件
使用方式引入weui.wxss 移入到app.css

微信二次開發
雲服務:阿里雲、七牛、新浪雲

微信二次開發:以微信平臺爲入口的webapp我們稱它爲微信二次開發,也可以說公衆號開發

jssdk:是由微信團隊開發的工具類,和h5+很相似,他們都是進行硬件調用的
其原理將html5語言轉化爲原生的語言,然後實現html5和原生語言的對換
jssdk使用必需服務器(處於安全的角度)

微信jssdk使用前需要進行驗證
wx.config() wx.reader()
wx.config() 驗證方法
appId:公衆號
timetamp:時間戳
nonceStr:自己定義的一個規範字符串
signature:簽名
jsApiList:用於添加jsapi列表
debug:設爲true給你一個提示,告訴你驗證成功還是失敗

驗證需要四步:
1、利用appID和app密鑰來生成一個access_token (7200秒時效)
2、利用access_token來獲取一個jsapiTicket臨時票據,生成一個時間戳
3、利用時間戳nonceStr jsapi_ticket最終給我生成一個簽名

cookie
存儲用戶首選項

wx.ready():驗證成功回調函數
wx.error():驗證失敗回調函數

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章