小程序項目搭建

使用uni-app作爲框架，Chrome作爲調試工具。

https://uniapp.dcloud.io/frame

目錄

爲什麼選擇uni-app

環境部署

爲什麼（點解？？？）

主要是這個原因 -- 90%兼容vue，上手成本低

# 數據雙向綁定
<img :src="imgSrc"/>
<input v-model="reason" placeholder="填寫理由" class='reason'/>

<image src="{{imgSrc}}"></image>
<input bindinput="bindReason" placeholder="填寫理由" value='{{reason}}' name='reason' />

當表單內容發生變化時，會觸發表單元素上綁定的方法，然後在該方法中，通過this.setData({key:value})來將表單上的值賦值給data中的對應值

Page({
    data:{
        reason:''
    },
	bindReason(e) {
        this.setData({
          reason: e.detail.value
        })
  	}
})

# 取值
vue中，通過this.reason取值
小程序中，通過this.data.reason取值

# 在小程序中，不能直接在綁定事件的方法中傳入參數，需要將參數作爲屬性值，綁定到元素上的data-屬性上，然後在方法中，通過e.currentTarget.dataset.*的方式獲取，從而完成參數的傳遞

# 列表渲染
uni-app使用方式
<li v-for="item in items">{{ item.message }}</li>

原生微信小程序使用方式
<text wx:for="{{items}}">{{item}}</text>  

# 顯示與隱藏
uni-app使用方式
使用v-if 和v-show控制元素的顯示和隱藏

小程序使用方式
使用wx-if和hidden控制元素的顯示和隱藏

# 事件處理
uni-app使用方式
使用v-on:event綁定事件，或者使用@event綁定事件,例如:

小程序使用方式
全用bindtap(bind+event)，或者catchtap(catch+event)綁定事件,例如：

# <template/> 和 <block/>
uni-app 支持在 template 模板中嵌套 <template/> 和 <block/>，用來進行 列表渲染 和 條件渲染。
<template/> 和 <block/> 並不是一個組件，它們僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。

// 事件映射表，左側爲 WEB 事件，右側爲 ``uni-app`` 對應事件
{
    click: 'tap',       --- 重點關注
    touchstart: 'touchstart',
    touchmove: 'touchmove',
    touchcancel: 'touchcancel',
    touchend: 'touchend',
    tap: 'tap',
    longtap: 'longtap', //推薦使用longpress代替
    input: 'input',
    change: 'change',
    submit: 'submit',
    blur: 'blur',
    focus: 'focus',
    reset: 'reset',
    confirm: 'confirm',
    columnchange: 'columnchange',
    linechange: 'linechange',
    error: 'error',
    scrolltoupper: 'scrolltoupper',
    scrolltolower: 'scrolltolower',
    scroll: 'scroll'
}
事件對比官網鏈接：https://ask.dcloud.net.cn/article/35786

環境部署

基於vue-cli搭建環境

首先得全局安裝vue-cli ：使用命令yarn global add @vue/cli

使用預設創建項目 — 預設在內網下載不了，最好在外網下載好再copy到內網來

vue create -p dcloudio/uni-preset-vue my-project

搭建好了的項目結構是這樣的,畫紅線的請忽略

啓動項目後的界面

搭建Css預處理器

根據產品線的需求來。項目自帶sass。如果產品線是使用的是less？stylus？可直接安裝loader和對應的轉譯器即可

這裏以less爲例：yarn add less-loader less -D,那麼就可以在標籤裏面使用less了

<style lang="less"></style>

封裝請求

uni-app的請求方式是uni.request(params),在業務裏面使用效果不是很佳。這裏使用的目標是將請求掛在到Vue上，然後在業務裏面直接使用this.xxx發送請求。請求封裝詳情請看附件

mock數據封裝

爲了方便本地調試，前端在後臺不能及時給到數據時可以本地離線調試。詳情請看mock數據封裝附件

封裝iconfont字體

支持 base64 格式圖片。
支持網絡路徑圖片。
小程序不支持在css中使用本地文件，包括本地的背景圖和字體文件。需以base64方式方可使用。App端在v3模式以前，也有相同限制。v3編譯模式起支持直接使用本地背景圖和字體。
使用本地路徑背景圖片需注意：
爲方便開發者，在背景圖片小於 40kb 時，uni-app 編譯到不支持本地背景圖的平臺時，會自動將其轉化爲 base64 格式；
圖片大於等於 40kb，會有性能問題，不建議使用太大的背景圖，如開發者必須使用，則需自己將其轉換爲 base64 格式使用，或將其挪到服務器上，從網絡地址引用。
本地背景圖片的引用路徑推薦使用以 ~@ 開頭的絕對路徑。

定義

@font-face {font-family: "iconfont";
  src: url('~@/static/iconfont/iconfont.ttf?t=1592478860600') 
  format('truetype'); 
}

引入

@import "static/iconfont/iconfont.css";

尺寸單位

框架內部使用的單位 rpx => em // 類似em/rem

vue頁面支持普通H5單位，但在nvue裏不支持：
rem 默認根字體大小爲 屏幕寬度/20（微信小程序、字節跳動小程序、App、H5）
vh viewpoint height，視窗高度，1vh等於視窗高度的1%
vw viewpoint width，視窗寬度，1vw等於視窗寬度的1%

環境判斷

• 通過process.env.NODE_ENV獲取
• uni.getSystemInfoSync().platform android | ios | 都不是的話就運行在開發者工具上

路由跳轉

uni-app頁面路由爲框架統一管理，開發者在pages.json裏面配置每個路由頁面的路徑及頁面樣式。
uni-app 有兩種頁面路由跳轉方式：使用navigator組件跳轉、調用API跳轉

生命週期

官網文檔

封裝小程序自定義組件 —TODO

封裝TypeScript —TODO

國際化 --TODO

PS：

小程序組件需要放在項目特殊文件夾 wxcomponents（或 mycomponents、swancomponents）。HBuilderX 建立的工程 wxcomponents 文件夾在 項目根目錄下。vue-cli 建立的工程 wxcomponents 文件夾在 src 目錄下。可以在 vue.config.js 中自定義其他目錄
小程序組件的性能，不如vue組件。使用小程序組件，需要自己手動setData，很難自動管理差量數據更新。而使用vue組件會自動diff更新差量數據。所以如無明顯必要，建議使用vue組件而不是小程序組件。比如某些小程序ui組件，完全可以用更高性能的uni ui替代。
當需要在 vue 組件中使用小程序組件時，注意在 pages.json 的 globalStyle 中配置 usingComponents，而不是頁面級配置。
注意數據和事件綁定的差異，使用時應按照 vue 的數據和事件綁定方式
屬性綁定從 attr="{{ a }}"，改爲 :attr="a"；從 title="複選框{{ item }}" 改爲 :title="'複選框' + item"
事件綁定從 bind:click="toggleActionSheet1" 改爲 @click="toggleActionSheet1"
阻止事件冒泡 從 catch:tap="xx" 改爲 @tap.native.stop="xx"
wx:if 改爲 v-if
wx:for="{{ list }}" wx:key="{{ index }}" 改爲v-for="(item,index) in list"
原事件命名以短橫線分隔的需要手動修改小程序組件源碼爲駝峯命名，比如：this.$emit('left-click') 修改爲 this.$emit('leftClick')（HBuilderX 1.9.0+ 不再需要修改此項）

# 思考小程序可以通過lang設置不同的語言編譯？？<script module="test" lang="wxs">

CSS變量	描述	App	小程序	H5
–status-bar-height	系統狀態欄高度	系統狀態欄高度、nvue注意見下	25px	0
–window-top	內容區域距離頂部的距離	0	0	NavigationBar 的高度
–window-bottom	內容區域距離底部的距離	0	0	TabBar 的高度