3.四件套
3.1 js
3.1.1 基本結(jié)構(gòu)
3.1.1.1 引用文件與全局變量
????????前端開和客戶端開發(fā)有一點差別颓遏，客戶端想要使用某一個類的對象需要先import某個對象叁幢，然后new()，這樣就可以拿著這個對象的引用對這個對象進(jìn)行操作了窒百；而前端開發(fā)不同篙梢，它其實并沒有import的概念渤滞，想要引用某個類的對象，通常都是定義一個全局變量（var或者const）录肯，通過require方法給它賦值即可论咏。
3.1.1.2 私有變量和私有方法
????????私有變量和私有方法和客戶端開發(fā)相同蠢护，都是先定義葵硕，再使用懈凹，具體的只是語法不同悄谐。
3.1.2 系統(tǒng)方法
3.1.2.1 生命周期
? ? ? ? ? ?以下iOS们陆、Android情屹、小程序的頁面生命周期基本上保持一一對應(yīng)
3.1.2.2 分享
????????分享回調(diào)函數(shù)onShareAppMessage(res)在兩種情況下會被觸發(fā)：
????????????????a.點擊微信導(dǎo)航上自帶的轉(zhuǎn)發(fā)按鈕椅文，res.from = "menu"
????????????????b.點擊自定義分享按鈕（open-type="share"),res.from = "button"
????????分享回調(diào)函數(shù)支持返回一個map對象，常用的格式為：
????????return{
????????????????title:"展示給分享對象用戶的標(biāo)題",
????????????????path:"分享對象用戶點擊分享對話框時跳轉(zhuǎn)的目標(biāo)頁面",
????????????????imageUrl:"展示給目標(biāo)用戶的對話框中的圖片雾袱，默認(rèn)為當(dāng)前頁面的上半部分截圖芹橡，尺寸固定：從頂部開始煎殷，高度為 80% 屏幕寬度的圖像作為轉(zhuǎn)發(fā)圖片",
????????????????success(res){
????????????????????????console.log("之前分享成功之后會回調(diào)至這個閉包中腿箩，現(xiàn)在微信把接口關(guān)閉了")
????????????????},
????????????????fail(res){
????????????????????????console.log("同上")
????????????????}
????????}
3.1.2.3 上拉下拉刷新
????????onPullDownRefresh：監(jiān)聽用戶下拉動作
????????onReachBottom：頁面上拉觸底事件的處理函數(shù)
3.1.3 頁面跳轉(zhuǎn)/路由
????????小程序開發(fā)中除了邏輯處理以外豪直，就是常見的頁面跳轉(zhuǎn)了，大概有五種珠移，和客戶端開發(fā)差異性不大弓乙。
3.1.3.1 push
????????從當(dāng)前頁面進(jìn)入下一級頁面，當(dāng)前頁面仍然活著
????????wx.navigateTo({
? ? ? ???????? url: '../login/login'
? ? ? ? })
3.1.3.2 pop
????????從當(dāng)前頁面返回上級頁面钧惧，當(dāng)前頁面被刪除暇韧，以下方法通常和getCurrentPages()配合使用
?????????wx.navigateBack({
????????????????delta:n //返回到上n級頁面
????????})
3.1.3.3 redirect
????????將當(dāng)前頁面替換為某頁面，當(dāng)前頁面被刪除
????????wx.redirectTo({
????????????????url: '../login/login'
????????})
3.1.3.4 reLaunch
????????關(guān)閉所有頁面浓瞪，將某個頁面設(shè)置為root頁面懈玻，所有頁面都被關(guān)閉
????????wx.reLaunch({
????????????????url: '../login/login'
????????})
3.1.3.5 switchTab
????????關(guān)閉所有頁面涂乌，將某個頁面設(shè)置為root頁面历涝，所有頁面都被關(guān)閉
????????wx.switchTab({
????????????????url: '../login/login'
????????})
3.2 json
3.2.1 頁面配置
????????{
????????????????navigationBarBackgroundColor:? "#000000", //導(dǎo)航欄背景顏色
????????????????navigationBarTextStyle:"white", //導(dǎo)航欄標(biāo)題顏色赵刑，僅支持?black?/?white
????????????????navigationBarTitleText:"", //導(dǎo)航欄標(biāo)題文字內(nèi)容
????????????????backgroundColor:"#ffffff", //窗口的背景色
????????????????backgroundTextStyle:"dark", //下拉 loading 的樣式铐懊，僅支持?dark?/?light
????????????????enablePullDownRefresh:"false", //是否全局開啟下拉刷新茅茂。
????????????????onReachBottomDistance:"50", //頁面上拉觸底事件觸發(fā)時距頁面底部距離碴倾，單位為px
????????????????disableScroll:"false" //設(shè)置為?true?則頁面整體不能上下滾動矫户；只在頁面配置中有效耻台，無法在?app.json?中設(shè)置該項
????????}
3.2.2 自定義組件調(diào)用相關(guān)
?????????此處略過（usingComponents）摄杂，在后面的章節(jié)中會單獨提到秧饮。
3.3 wxml
?????????這里主要介紹幾種常用的標(biāo)簽類型帽撑，以及該標(biāo)簽下常用的幾種屬性专筷。
3.3.1 view
????????<view class="first-view" id="id-view" style="background:white;" bindtap="onclick" hidden="false">測試文字</view>
3.3.2 text
????????<text class="first-text" id="id-text" style="color:white;" bindtap="onclick">測試文字</text>
3.3.3 button
????????<button class="first-button" id="id-button" style="color:white;" bindtap="onclick" open-type="share/getUserInfo">測試文字</button>
3.3.4 input
????????<input class="first-input" bindinput="bindKeyInput" type="number" maxlength="13" placeholder="請輸入13位數(shù)字"></input>
3.3.5 image
????????<image class="first-image" src="../../assets/login/bg.jpeg"></image>
3.3.6 列表渲染
3.3.6.1 單節(jié)點列表
????????<view wx:for="{[1,2,3,4]}" wx:for-index="index" wx:for-item="item">{{index}}: {{item}}</view>
3.3.6.2 多節(jié)點列表
????????page.js文件
????????????????Page({
????????????????????? data: {
????????????????????????????testList:[1,2,3,4]
????????????????????????? },
????????????????????onLoad: function (options) {}
? ? ? ? ? ? ? ? ? ?})
????????page.wxml文件
? ? ? ? <block wx:for="{{testList}}">
? ???????????? <view> {{index}}: </view>
? ???????????? <view> {{item}} </view>
????????</block>
3.3.7 canvas
后面會有單獨的章節(jié)來介紹分享的具體技術(shù)點和實現(xiàn)方式。
3.4 wxss
3.4.1 屏幕適配單位
????????rpx：所有的屏幕寬度均為750rpx，高度=（750 * 屏幕分辨率的高/寬）rpx
3.4.2 class和id的區(qū)別
3.4.2.1 意義上的區(qū)別
????????從面向?qū)ο蟮慕嵌瘸霭l(fā)辱姨，class就是常說的類替久，id就等于class的一個實例變量醇份，也就是支持多繼承
3.4.2.2 寫法的區(qū)別
????????a.使用class進(jìn)行的wxss:.first-view{/*具體的css樣式 */}
????????b.使用id進(jìn)行的wxss:#id-view{/*具體的css樣式 */}
????????c.在小程序中id和class均可以使用多次，來進(jìn)行wxss樣式描述哮肚，但是H5開發(fā)中的css中id只能使用一次
3.4.3 position屬性
????????absolute:
????????????????生成絕對定位的元素潮剪，相對于 static 定位以外的第一個父元素進(jìn)行定位捍壤。
????????????????元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定鹃觉。
????????fixed:
????????????????生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位沉填。
????????????????元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定蜀备。
? ? ? ? relative:
? ? ? ? ? ? ? ? 生成相對定位的元素脂凶，相對于其正常位置進(jìn)行定位。
? ? ? ? ? ? ? ? 元素位置通過margin-left,margin-top,margin-right,margin-bottom屬性進(jìn)行規(guī)定襟士。
????????static:
????????????????默認(rèn)值盗飒。沒有定位，忽略 top, bottom, left, right 或者 z-index 聲明陋桂。
????????inherit:
????????????????規(guī)定應(yīng)該從父元素繼承 position 屬性的值逆趣。
3.4.4 display:flex
? ? ? ? ?采用flex布局的元素，稱為flex容器嗜历，也就是使用彈性布局的容器宣渗，一般小程序里的容器都采用這種布局。
????????使用flex布局的容器有以下幾個屬性：
3.4.4.1 flex-direction：
容器內(nèi)元素的排列方向(默認(rèn)橫向排列)
????????主要有column? column-reverse row row-reverse
3.4.4.2 flex-wrap：
容器內(nèi)元素?fù)Q行方式梨州，當(dāng)有多元素的時候生效
????????主要有wrap nowrap wrap-reverse
3.4.4.3 flex-flow：
以上兩個屬性的簡寫方式
3.4.4.4 justify-content：
元素在主軸上的對齊方式痕囱，使用justify-content布局的容器有以下幾個屬性：
????????flex-start：在主軸上由左或者上開始排列
????????flex-end：在主軸上由右或者下開始排列
????????center：在主軸上居中排列
????????space-between：在主軸上左右兩端或者上下兩端開始排列
????????space-around：每個元素兩側(cè)的間隔相等。所以暴匠，元素之間的間隔比元素與邊框的間隔大一倍鞍恢。
3.4.4.5 align-items
元素在交叉軸上如何對齊，使用align-items布局的容器有以下幾個屬性：
????????flex-start：在交叉軸上由左或者上開始排列
????????flex-end：在交叉軸上由右或者下開始排列
????????center：在交叉軸上居中排列
????????stretch:填滿交叉軸
????????baseline:在主軸上的坐標(biāo)值相同
看圖說話：
3.4.4.6 align-content
定義了多根軸線的對齊方式。如果元素只有一根軸線帮掉，即只有一行或者一列弦悉，該屬性不起作用。
????????flex-start：在主軸上由左或者上開始排列
????????flex-end：在主軸上由右或者下開始排列
????????center：在主軸上居中排列
????????stretch:填滿交叉軸
????????space-between：在主軸上左右兩端或者上下兩端開始排列
????????space-around：每個項目兩側(cè)的間隔相等旭寿。所以警绩，項目之間的間隔比項目與邊框的間隔大一倍
????????看圖說話：
3.4.4.7 text-align
????????這種樣式本身不屬于flex樣式崇败，但是因為和上面的幾種樣式有點兒相似盅称，所以單獨拎出來和flex的樣式一起說。
????????這種樣式針對的是多排文字后室，并且必須設(shè)置當(dāng)前元素為display:inline-block時才能生效缩膝。
????????有以下幾個屬性：left，center,right
? ? ? ? 代碼如下：
????????????wxml文件：
????????????????????<text class = "third-text">測試文本7測試文本7測試文本7測試文本7測試文本7測試文本7測試文本7</text>
????????????wxss文件：
????????????????????.third-text{
? ???????????????????? display:inline-block;
? ???????????????????? text-align: center;
????????????????????}
3.4.4 幾種基本屬性
3.4.4.1 width/height
????????支持兩種方式岸霹，一種是rpx，一種是%，如下
????????????????.test-view{
????????????????????????width:50%;
????????????????????????height:100rpx;
????????????????}
3.4.4.2 z-index
????????做背景圖時很有用的一個參數(shù)案站，默認(rèn)值是0
3.4.4.3 border-radius
????????切圓角的參數(shù)搜立，如下：
????????.test-view{
????????????????border-radius:10rpx;
? ? ? ? ? ?}
3.4.4.4 border
????????描邊的參數(shù)，如下
????????.test-view{
????????????????border:1rpx solid #bebebe;
? ? ? ? ? ?}
????????1rpx 指的是描邊的線的寬度
????????solid 指的是實線效果刮吧，其實還有 outset 指的外凸效果 湖饱，或者inset 指的是內(nèi)嵌效果，不過做客戶端開發(fā)杀捻，絕大部分時候使用的都是solid井厌，必填項
????????#bebebe 指的是線條的顏色
3.4.4.5 font-size
????????描述文字大小的參數(shù)，如下
????????.test-text{
????????????????font-size:26rpx;
????????????}
3.4.4.6 font-weight
????????描述文字粗細(xì)的參數(shù)致讥，
????????lighter仅仆，normal，bold垢袱，bolder為默認(rèn)值
????????或者是100~900墓拜，只能是100的整數(shù)倍
????????其中400等于normal，700等于bold请契，注意這里不帶rpx單位
????????如下：
????????.text-text{
????????????????font-weight:400;
????????????????/* font-weight:bold; */
????????}
3.5 wxml與js數(shù)據(jù)通信
3.5.1 MVVM中的viewmodel進(jìn)行數(shù)據(jù)通信
????????js中的viewmodel：
????????data：{
????????????????text2:"測試文本2"
? ? ? ? ?}
????????js中的綁定事件:
????????onclick2:function(){
? ? ? ? ???????? this.setData({
? ? ? ? ? ? ? ? ? text2:"呵呵噠"
? ? ? ????????? })
? ???????? }
????????wxml:
????????????????<text bindtap='onclick2'>{{text2}}</text>
????????可以看到咳榜，最初頁面顯示的文字為“測試文本2”，點擊“哈哈哈”之后姚糊，變成了“呵呵噠”贿衍。
? ? ? ? ?和客戶端中的mvvm開發(fā)不同的是，前端開發(fā)自帶mvvm基因救恨，不需要客戶端那樣繁瑣的把數(shù)據(jù)和組件進(jìn)行一一綁定贸辈。
3.5.2 將wxml中的信息通過點擊事件傳遞給js文件
????????wxml文件：
????????????????<text class="first-text" bindtap='onclick3' id="3" data-text="測試文本3" data-name="測試的text">測試文本3</text>
????????js文件：
????????????onclick3:function(e){
? ????????? let id = e.currentTarget.id
? ????????? let text = e.currentTarget.dataset.text
? ????????? let name = e.currentTarget.dataset.name
? ????????? console.log("id =,",id,"text =",text,"name =",name)
? ? ? ? ? ? ?}
????????可以看到，打印結(jié)果是：
????????id = 3
????????text = 測試文本3
????????name = 測試的text
部分技術(shù)點引用自阮一峰的《阮一峰的網(wǎng)絡(luò)日志》：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
