wx小程序與傳統(tǒng)web的對比

傳統(tǒng)web一般就只有3個結(jié)構(gòu)(html,css,js)，而小程序多了個(json)配置文件

結(jié)構(gòu)傳統(tǒng)web微信小程序結(jié)構(gòu)HTMLWXML樣式CSSWXSS邏輯JavascriptJavascript配置無JSON

通過上面的對比可以看出，微信小程序是四層結(jié)構(gòu)，多個一層的配置文件.json

wx小程序的目錄結(jié)構(gòu)

要學習一個新的語言就要先要了解他的目錄結(jié)構(gòu)，以及目錄結(jié)構(gòu)中文件夾的功能

一、全局配置文件
全局配置文件主要有三個屬性組成：pages，window，tabBar

• pages主要是配置子頁面的路徑。
• window主要是配置頂部欄的一些信息。
• tabBar主要是配置底部導航欄的一些圖標，跳轉(zhuǎn)，文字等。

二、頁面的配置文件
就是配置每個頁面中的json文件。
他只能配置組件和頂部欄的一些信息

• usingComponents用來配置自定義組件
• 剩下的就直接在全局配置導航欄信息就可以了

具體語法

一、數(shù)據(jù)渲染
和vue的數(shù)據(jù)驅(qū)動渲染方式幾乎差不多。
js定義數(shù)據(jù)，wxml用{{數(shù)據(jù)/表達式}}方式渲染。

二、循環(huán)

<view wx:for="{{arry}}" wx:key="*this">{{index}}--{{item}}</view>
<view wx:for="{{obj}}" wx:for-item="value" wx:for-index="key" wx:key="name">{{key}}--{{value}}</view>

三、wx-if hidden

<!-- wx-if(去除dom) -->
<view wx:if="{{true}}">顯示</view>
<view wx:if="{{false}}">隱藏</view>
<!-- hidden(display:none) -->
<view>---------------------------------</view>
<view hidden>hidden</view>
<view hidden="{{false}}">hidden01</view>

四、事件綁定
在一個標簽中綁定事件的格式為：bind+事件名="函數(shù)名"

注：如果要這個函數(shù)中要傳參數(shù)時就要借助data-標簽名="{{數(shù)據(jù)}}"

例子1(類似于vue的雙向數(shù)據(jù)綁定)：

//html

//1.bindinput為input事件
<input type="text" bindinput="handleInput"/>
//2.bindtap為點擊事件
<button bindtap="handleButton" data-num="{{1}}">+</button>
<button bindtap="handleButton" data-num="{{-1}}">-</button>
<view>
  {{num}}
</view>

//js
  data: {
    num:0
  },
  handleInput:function(e){
    //this.setData()是對數(shù)據(jù)進行修改的固定方式
    this.setData({
        //e.detail.value為input輸入數(shù)據(jù)的值
      num:e.detail.value
    })
  },
  handleButton:function(e){
   //number為html中data-num屬性傳入的值
    var number= e.currentTarget.dataset.num
    this.setData({
      num:this.data.num+number
    })
  },

樣式

自適應寬度

rpx是微信開發(fā)的自適應寬度，它規(guī)定一個屏幕的大小為750rpx

例子：存在一個頁面 寬度 未知page

1. 頁面 (寬度：page) ,期中存在一個元素 寬度為100px
2. 那以上需求實現(xiàn)不同屏幕大小的適配

計算步驟

page px=750rpx
1px =750rpx/page
100px=750rpx*100/page

calc屬性

把公式計算出來的數(shù)，賦值給屬性。要利用此公式做計算

view{
    width:calc(750rpx*100/325)
}

樣式導入

wxss支持樣式導入

格式：@import+路徑

注意：格式只能是相對路徑

@import '../../style/commint.wxss';

選擇器

在小程序中是不支持*通配符選擇器的。

別的和普通的css的選擇器用法都一樣。

常見組件

view, text, rich-text, button , image , navigator , icon, swiper , radio, checkbox。

view

類似html中的div標簽

//不點擊默認為none，點擊之后切換對應樣式
<view hover-class="active">
內(nèi)容
</view>

text

類似html的span標簽

樣式和樣式的具體屬性

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

image

src:要寫網(wǎng)絡圖片鏈接，image標簽默認寬高320px 240px  

  mode:決定圖片元素如何與圖片做適配

?    1.scaleToFill(默認)不等比例拉伸

?    2.aspectFit 等比例拉伸  確保長邊顯示出來

?    3.aspectFill 等比例拉升 確保短邊顯示出來

?    4.widthFix 寬度指定，高度自動調(diào)節(jié)

?    5.top,bottom。。類似于background-position

  lazy-load:懶加載會自己判斷  視口 上下三屏幕 高度

swiper

是wx小程序的輪播圖插件

swiper是輪播圖的父級標簽，具體的元素用swiper-item期中可以放圖片或鏈接

• swiper按照圖片的大小自適應

公式：swiper的寬度/swiper的高度=圖片的寬度/圖片的高度

一般swiper的寬度都會占整個屏幕的寬度，所以swiper的寬度已知（即100vw），所以只需要設置swiper的高度和圖片的寬高適配就行了

圖片的寬和高都已知，所以swiper的高度為：swiper的寬度*圖片的高度/圖片的寬度

具體屬性

swiper屬性

例子：

//wxml
<swiper>
    <swiper-item><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"></image></swiper-item>
    <swiper-item><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg"></image></swiper-item>
    <swiper-item><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB183NQapLM8KJjSZFBSutJHVXa.jpg"></image></swiper-item>
</swiper>

//wxss
swiper{
  width: 100%;
  height:cale(100vw*280/520) ;
}
image{
  width: 100%;
}

navigator

相當于html中的a標簽，但是他與a標簽又有不同之處，它主要是用來進行頁面的跳轉(zhuǎn)

是一個塊級元素標簽

rich-text

相對于vue中v-html

• nodes屬性

該屬性用于設置html值

<rich-text nodes="{{html}}"></rich-text>

• 受信任的HTML節(jié)點及屬性：

https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

button

不同尋常的按鈕

//樣式
<button>默認樣式</button>
<!-- 設置尺寸 -->
<button size="mini">mini</button>
<!-- 改顏色：primary顏色 -->
<button type="primary">primary</button>
<!-- 改顏色+透明：warn+plain -->
<button type="warn" plain>warn和plain</button>
<!-- 等待圖片：loading -->
<button type="primary" loading>loading</button>
<!-- 無法選中：disabled -->
<button disabled>disabled</button>


<!-- open-type屬性值 -->
<!-- 分享：share -->
<button open-type="share">share</button>
<!-- 獲取手機號和bindgetphonenumber事件結(jié)合使用(企業(yè)有效) -->
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">獲取手機號</button>
<!-- 獲取用戶信息：和bindgetuserinfo事件結(jié)合使用(回調(diào)函數(shù)中返回) -->
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">獲取用戶信息</button>
<!-- 授權(quán)：之前授權(quán)的項才能在這里面顯示 -->
<button open-type="openSetting">授權(quán)頁面</button>
<!-- 聯(lián)系客服，可在微信開發(fā)者平臺綁定客服 -->
<button open-type="contact">聯(lián)系客服</button>
<!-- 意見反饋 -->
<button open-type="feedback">feedback</button>

icon

wx封裝的字體圖標

<icon type="success" size="40" color="black"></icon>

radio

單選框，要配合radio-group使用，也可以利用color屬性改變顏色

//wxml
<radio-group bindchange="gender">

  <radio value="male" color="blue">男</radio>

  <radio value="female" color="blue">女</radio>

</radio-group>

<view>{{gender}}</view>

//js
data: {
    gender:""
  },
  gender:function(e){
    let gender=e.detail.value
    this.setData({
      gender
    })
  },

checkbox

多選框，和radio用法差不多，要配合checkbox-group使用，也能利用color改變顏色

//wxml
<checkbox-group bindchange="checkChaneg">
    <checkbox wx:for="{{list}}" wx:key="name" value="{{item.value}}">{{item.name}}</checkbox>
</checkbox-group>
<view wx:for="{{viewText}}" wx:key="*this">{{item}}</view>

//js
data: {
    list:[{
      name:"香蕉",
      value:'bananr'
    },{
      name:"蘋果",
      value:'apple'
    },{
      name:"西瓜",
      value:'melon'
    }],
    viewText:[]
  },
  checkChaneg:function(e){
    let viewText=e.detail.value
    this.setData({
      viewText
    })
  },

自定義組件

主要是指在頁面中封住一些通用的功能到一個組件中

• 首先先建立一個組件目錄結(jié)構(gòu)

通過wxml，js和wxss定義樣式

• 配置自定義的組件

在要用這個組件的項目中的配置文件.json中配置

• 在wxml中直接寫這個組件就可以運用了

 <Tabs list="{{list}}"></Tabs>

父類向子類傳參

如果這個自定義組件的文字要根據(jù)每個父級穿過來的參數(shù)動態(tài)改變，就要運用到此功能

• 例如：動態(tài)改變標簽的文字

父級：運用組件的實例、子級：組件

主要是運用自定義組件的屬性傳參，進行此操作，然后在組件的js文件中的properties屬性接受

接受方式：

//list為接受傳來的參數(shù)，value為默認值
properties: {
      list:{
        type:Array,
        value:[]
      }
  },

父級穿過來的值，子級可以就當這個值是data中的值一樣的使用，就完成了此功能

子級向父級傳參

通過子級自定義事件傳給父級，然后再在子級的做js操作就顯得比之前只在組件中定死js邏輯要爽

因為在組件寫js邏輯，是在組件中定死的邏輯，而在父級寫就是跟隨父級變化的邏輯

• 首先在組件觸發(fā)事件時，自定義組件并把數(shù)據(jù)傳給父級

methods: {
    Tap(e){
      let{index}=e.currentTarget.dataset;
      this.triggerEvent('itemChange',{index})
    }
  }
})

• 父級利用自定義組件的回調(diào)函數(shù)接受數(shù)據(jù)，并做js處理

//wxml
<Tabs list="{{list}}" binditemChange="change"></Tabs>

//js
 change(e){
     let {index}=e.detail;
     let {list}=this.data
      // wx小程序foreach會把修改的項保存到原數(shù)組中
      list.forEach((v,i)=>{
        if (i===index){
          v.isTrue=true
        }else{
          v.isTrue=false
        }
      })
      this.setData({
        list
      })
  },

點擊標題內(nèi)容改變

在組件中運用slot標簽，solt便簽的內(nèi)容會被父級所運用的組件標簽的內(nèi)容所替代

• 組件實現(xiàn)步驟

在組件中使用solt標簽，用來被父級內(nèi)容替換

• 運用組件父級

<Tabs list="{{list}}" binditemChange="change">
    <block wx:if="{{list[0].isTrue}}">內(nèi)容1</block>
    <block wx:elif="{{list[1].isTrue}}">內(nèi)容2</block>
    <block wx:elif="{{list[2].isTrue}}">內(nèi)容3</block>
    <block wx:elif="{{list[3].isTrue}}">內(nèi)容4</block>
</Tabs>

自定義組件補充

生命周期

生命周期就是系統(tǒng)自定好的觸發(fā)事件，只不過觸發(fā)時機由系統(tǒng)已經(jīng)定義好了

分為應用生命周期和頁面生命周期

一、應用生命周期就是app.js監(jiān)聽的各種生命周期事件

二、頁面生命周期

在每個pages文件中的js文件中配置

生命文檔https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html