微信小程式個人技術總結

這個作業屬于哪個課程	<福州大學2021春軟體工程實踐S班>
這個作業要求在哪裡	軟體工程實踐總結&個人技術部落格
這個作業的目标	相關技術部落格
參考文獻	無

目錄

• 技術概述
• 技術詳述
  • flex布局
  • 微信小程式的資料綁定
    • 資料流向
      • 單向資料綁定
        • data，setData
        • js當中函數
      • Mustache文法解析
  • 渲染
    • 條件渲染
    • 清單渲染
  • 事件
    • 用bind綁定事件執行回調
    • bind與catch的差別
  • 路由
    • js子產品導入導出
  • 自定義元件
    • 元件屬性
  • 外部樣式類
    • 提高樣式優先級
    • 元件獨立性
    • 自定義事件
  • 資料傳遞
    • app.js
      • 生命周期
      • 儲存全局變量
    • 小程式緩存
      • 異步擷取時
    • 元件擷取值
  • tabBar
    • 跳到帶有tabBar頁籤的頁面
  • this指針
• 問題，解決方案
• 總結

微信小程式是類似于Vue的較于Vue的更簡單的開發前端代碼。新版微信小程式，增加了資料響應，模闆文法，也就使得開發變得更加便捷，更加類似Vue，但上手更簡單，更好了解。學習這些技術可以更好的開發。當涉及到頁面布局，頁面響應，頁面渲染，頁面響應時間，頁面引用元件，頁面跳轉時，這些技術就必不可少

容器元件

//flex布局
.container{
  display: flex;
  flex-direction: column;
  align-items: center;
   //align-items: baseline;//按照容器基線對齊
  justify-content: center;
   //justify-content: space-between 兩端
   //justify-content: space-around 等距
   //flex-wrap : wrap 超過就換行
}
           

align-items:center

交叉軸居中

justify-content: center;

主軸居中

主軸：row排列，x軸就是主軸

​ column排列，y就是主軸

交叉軸：另外一條軸

• • JS從伺服器擷取資料
  • JS通過setData将資料綁定到視圖
• 簡易雙向資料綁定，實作資料同步（類似Vue）

• js檔案
  • onload
    • 頁面加載時執行的代碼
  • data
    • data下定義的變量，可以在wxml上用

js檔案當中

data{
    a:"123"
}
onLoad{
    this.setData({
        b:"2021"
    })
}
           

應用

<text>{{a+b}}</text>
           

資料優先

原生js DOM優先

onReachBottom 觸底時

onPullDownRefrash 下拉重新整理時

{{}}

多層json就直接什麼.什麼

也可以加表達式

<wx:if={{flag}}>
<wx:else>
           

content内容多時，用數組[{},{}]顯示

此時 this.setData({ posts:content })

wx:for 放在要循環的内容外

用包裹

同時内部的資料取時

用item.content

👆是因為預設的wx:for-item="item"

也可以修改成其他的，就可以用不同的内容開頭了

<block wx:for="{{posts}}">
    <view class="post-container">
      <view class="post-author-date">
        <image src="{{item.headImgSrc}}" class="post-author"></image>
        <text class="post-date">{{item.date}}</text>
      </view>

      <text class="post-title">{{item.title}}</text>

      <image src="{{item.imgsrc}}" class="post-image"></image>

      <text class="post-content">{{item.content}}</text>

      <view class="post-like">
        <li-icon name="favor" class="post-like-image" size="32" color="#666"/>
        <text class="post-like-font">{{item.dataNum.collection}}</text>
        <li-icon name="eye" class="post-like-image" size="32" color="#666"/>
        <text class="post-like-font">{{item.dataNum.reading}}</text>
      </view>
    </view>
  </block>
           

• 屬性
  • wx:for-item="item"
    • 預設item
    • 每一項前面要添加的内容
  • wx:for-index="index"
    • 預設index
    • 每一項的索引擷取
  • wx:key="id"
    • 鍵值
    • 不加{{}}，不然會警告

tap 點選事件

<view bind:tap="onTap" class="btn-container"></view>
           

onTap: fucntion(){
    
}
           

也可以用catch：tap

• catch
  • 阻止向上冒泡
• bind
  • 不阻止向上冒泡

• wx.navigateTo({
  	url:"/pages/page"
  })
             

  左上角有一個傳回箭頭

  相當于一個頁面的子頁面，可以傳回到上一級

  ​ 最多隻能有10級子頁面

  • 跳轉出去時，原來頁面不會被銷毀

• wx.redirectTo({
  	url:""
  })
             

  左上角就沒有傳回箭頭了

  左上角有一個home按鈕，可以跳轉到首頁

  • 跳轉出去時，原來頁面會被銷毀掉

單獨将data資料分離到一個data.js資料當中

• 資料導出

  • module.exports={
    	postList : local_database
    }
               

  • export{
    	postList
    }
               

    後續導入的時候，需要保證同名
• 資料導入

  • var postData = require("")
    //裡面隻能跟相對路徑
               

    隻能跟相對路徑

  • import {postList} from "../../data/data.js"
               

• 使用
  • 在要使用的頁面的json檔案當中

    "usingComponents": {
        "li-icon":"/miniprogram_npm/lin-ui/icon/index"
      }
               

• 寫在元件js檔案的properties中

• properties: {
     text:{
       type:String,
       value:'123'
     }
   },
             

• text:String
  
  //預設值是每種類型的預設值
             

• properties定義的内容和data一樣可以做資料綁定

當外部使用元件樣式不生效時候

可以定義外部樣式類

調用元件的頁面定義樣式，元件去使用

<movie-list f-class="movie-list"></movie-list>
<movie-list f-class="movie-list"></movie-list>
<movie-list f-class="movie-list"></movie-list>

           

元件

externalClasses:['f-class'],
  
properties: {

  },
           

movie-list{
    background-color:teal !important;
}
           

每個元件事件不一樣

讓元件使用者決定響應什麼事件

<view  bind:tap="onTap" data-pid="0"></view>
           

methods: {
    onTap (event){
      this.triggerEvent('posttap',{
          pid : event.currentTarget.dataset.pid
      })
    }
  }
           

• 調用元件位置（父元件）

  <post bind:posttap = "onGoToDetail"/>
             

  //擷取data
  onGoToDetail(event){
  	const pid = event.detail.pid
  }
             

data屬性

<view data-id="{{postId}}"></view>
           

命名規範：

​ -連接配接符

這樣在dataset當中就會轉換成小駝峰命名

• event當中
  • currentTarget綁定了對象
    • dataset當中有
      • id
• 傳遞資料在url後面添加
• 擷取參數時，onLoad參數的option就會取出來參數
  • onload裡面就有
    • id=？？

• onLaunch
• onShow
• onHide
• onError

App({
    onLaunch(){
        
    },
    test :1
})
           

//擷取值
const app = getApp()
console.log(app.test)
           

類似于localstorage

• 同步
  • wx.setStorageSync('key', data)
• 異步

  • wx.setStorage({
         data: data,
         key: 'key',
       })
               

wx.removeStorageSync("key")

wx.clearStorage()

• 讀取緩存
  • wx.getStorageSync("key")

wx.setStorage({
      data: data,
      key: 'key',
    })
    
const falg = wx.getStorage({
	key:"flag",
	success(data){
		console.log(data.data)
	}
})

//當沒有定義success時候，取值的傳回值時promise
           

promise擷取

• 傳統

  • const falg = wx.getStorage({
    	key:"flag"
    })
    flag.then((value)=>{
    	console.log(value)
    })
    
               

• ES7

  • async onLoad(){
    	//要使用await的函數體前面+ async
    	const flag = await wx.getStorage({
    		key : 'flag'
    	})
    }
               

一組應用

data: {
    _pid : null,
    _post_collected : {},
    is_collect : false
  },
  onLoad: function (options) {
    const collected = wx.getStorageSync('posts_collected')
    this.data._post_collected = collected //将目前storage中的内容給到data當中
    this.data._pid = options.pid
    const is_collect = collected[this.data._pid]
    this.setData({
      postData,
      is_collect
    })
  },
  onCollection(event){
    const postsCollected = this.data._post_collected
    this.setData({
      is_collect : !this.data.is_collect
    })
    postsCollected[this.data._pid] = this.data.is_collect
    wx.setStorageSync('posts_collected', postsCollected)
    console.log(wx.getStorageSync('posts_collected'))
  },
           

在元件當中定義一個properties屬性，在調用元件時，直接給元件進行傳參

app.json

"tabBar": {
    "selectedColor": "#333333",
    "color": "#999999",
    "borderStyle": "white",
    "position": "bottom",
    "list": [
      {
        "text": "閱讀",
        "pagePath": "pages/posts/posts",
        "iconPath":"/images/tab/post.png",
        "selectedIconPath": "/images/tab/[email protected]"
      },
      {
        "text": "電影",
        "pagePath": "pages/movies/movies",
        "iconPath":"/images/tab/movie.png",
        "selectedIconPath": "/images/tab/[email protected]"
      }
    ]
  },
           

onTap: function(){
    wx.switchTab({
      url: '/pages/posts/posts',
    })
  },
           

this指針問題

wx.request({
      url: 'http://t.talelin.com/v2/movie/in_theaters?start=0&count=3',
      success(res){
        this.setData({
          inTheaters:res.data.subjects
        })
      }
    })
    //導緻this指針不明确
           

使用箭頭函數，使得success當中不存在this指針

wx.request({
      url: 'http://t.talelin.com/v2/movie/in_theaters?start=0&count=3',
      success:(res)=>{
        this.setData({
          inTheaters:res.data.subjects
        })
      }
    })
           

• wx.request無法通路https的頁面
  • 解決方案：改用request後就可以使用了
• • 存在有嵌套簡單函數利用function文法this指針指向錯誤問題。再外部存儲this指針後，再調用函數

這次分給我的開發任務較少，主要任務集中在監督，管理上，上述技術詳情有的并沒有運用在我自己的開發當中，但本次項目必不可少。這次學到的微信小程式知識仍然停留在簡單層面，還需要再往深處研究，才能更好的解決實戰中的更多問題。