【重點突破】—— UniApp 微信小程序開發官網學習One

時間 2019-12-20

標籤重點突破 uniapp 微信程序開發學習简体版

原文原文鏈接

1、初步認識javascript

uni-app官網：https://uniapp.dcloud.io/component/README

HBuilderX官方IDE下載地址： http://www.dcloud.io/hbuilderx.html

選擇版本：下載App開發版，可開箱即用；

如使用cli方式建立項目，可直接下載標準版

建立uni-app: 工具欄裏的文件 -> 新建 -> 項目 -> 選擇uni-app，輸入工程名

運行uni-app: 快捷鍵 ctrl+r 選擇運行方式

發佈爲微信小程序：

申請微信小程序AppID
在HBuilderX中頂部菜單依次點擊 "發行" => "小程序-微信"，輸入小程序名稱和appid點擊發行便可在 unpackage/dist/build/mp-weixin 生成微信小程序項目代碼
在微信開小程序發者工具中，導入生成的微信小程序項目
測試項目代碼運行正常後，點擊「上傳」按鈕，以後按照「提交審覈」 => 「發佈」小程序標準流程，逐步操做便可

不建議使用vue-cli建立項目：必須使用vue-cli3.X，vue-cli更新快於HBuilderX

npm install -g @vue/cli

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

//運行併發布微信小程序版uni-app
npm run dev:mp-weixin 
npm run build:mp-weixin

學習uni-app路徑：

uni-app首頁介紹 https://uniapp.dcloud.io/quickstart
快速上手 https://uniapp.dcloud.io/quickstart
3節官方教程 https://ke.qq.com/course/343370?taid=2788142445051210
白話uni-app http://ask.dcloud.net.cn/article/35657
培訓實戰視頻 https://ke.qq.com/course/379043?from=800006421
不太須要專門去學習小程序開發，只看uni-app官網便可
注意vuejs能夠在html中使用，而uni-app裏沒有HTML，直接就是vue文件。
另外vue的路由、npm能夠不學
uni-app官方教程學習手記 http://www.javashuo.com/article/p-pjedgeev-cr.html

跨端開發注意每一個端，有每一個端的管理規則

H5端的瀏覽器有跨域限制；
微信小程序會強制要求https連接，而且全部要聯網的服務器域名都要配到微信的白名單中；

uni-app基於Vue 2.0實現，雖然使用vue，但在app和小程序裏，不是spa，而是mpa

2、框架簡介css

開發規範：

頁面文件遵循 Vue 單文件組件 (SFC) 規範。每一個 .vue 文件包含三種類型的頂級語言塊 <template>、<script> 和 <style>，還容許添加可選的自定義塊
組件標籤靠近小程序規範
接口能力（JS API）靠近微信小程序規範，但需將前綴 wx 替換爲 uni

uni-app API文檔： https://uniapp.dcloud.io/api/README

uni.on 開頭的 API 是監聽某個事件發生的 API 接口，接受一個 CALLBACK 函數做爲參數。當該事件觸發時，會調用 CALLBACK 函數。
如未特殊約定，其餘 API 接口都接受一個 OBJECT 做爲參數。
OBJECT 中能夠指定 success，fail，complete 來接收接口調用結果。

數據綁定及事件處理同 Vue.js 規範，同時補充了App及頁面的生命週期
爲兼容多端運行，建議使用flex佈局進行開發

3、目錄結構html

┌─components uni-app組件目錄
│ └─comp-a.vue 可複用的a組件
├─hybrid 存放本地網頁的目錄，詳見
├─platforms 存放各平臺專用頁面的目錄，詳見
├─pages 業務頁面文件存放的目錄
│ ├─index
│ │ └─index.vue index頁面
│ └─list
│ └─list.vue list頁面
├─static 存放應用引用靜態資源（如圖片、視頻等）的目錄，注意：靜態資源只能存放於此
├─wxcomponents 存放小程序組件的目錄，詳見
├─main.js Vue初始化入口文件
├─App.vue 應用配置，用來配置App全局樣式以及監聽 應用生命週期
├─manifest.json 配置應用名稱、appid、logo、版本等打包信息，詳見
└─pages.json 配置頁面路由、導航條、選項卡等頁面類信息，詳見

注意： vue

static 目錄下的 js 文件不會被編譯，若是裏面有 es6 的代碼，不通過轉換直接運行，在手機設備上會報錯。
css、less/scss 等資源一樣不要放在 static 目錄下，建議這些公用的資源放在 common 目錄下。
有效目錄： h5 -> H5 、mp-weixin -> 微信小程序

4、生命週期java

應用生命週期：

onLaunch 當uni-app初始化完成時觸發（全局只觸發一次）
onShow 當uni-app啓動，或從後臺進入前臺顯示
onHide 當uni-app從前臺進入後臺
onUniNViewMessage 對nvue頁面發送的數據進行監聽（與微信小程序不一樣的，nvue向vue的通信）

注意：應用生命週期只能夠在App.vue中監聽，其它頁面監聽無效

頁面生命週期

onLoad、onShow、onReady、onHide、onUnload、onResize
onPullDownRefresh、onReachBottom、onShareAppMessage、onBackPress……

5、路由es6

在pages.json裏配置每一個路由頁面的路徑及頁面樣式，不支持 Vue Router

{
    "pages": [
           {
                "path": "pages/index/index", 
                "style": { ... }
           }, {
                "path": "pages/login/login", 
                "style": { ... }
           }
      ]
}

路由跳轉

使用navigator組件跳轉 https://uniapp.dcloud.io/component/navigator

<template>
    <view>
         <view class="page-body">
               <view class="btn-area">
                      <navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
                                <button type="default">跳轉到新頁面</button>
                      </navigator>
                      <navigator url="redirect/redirect?title=redirect" redirect hover-class="other-navigator-hover">
                                <button type="default">在當前頁打開</button>
                      </navigator>
               </view>
          </view>
     </view>
</template>

調用Api跳轉

uni.navigateTo(OBJECT)： 保留當前頁面，跳轉到應用內的某個頁面

// -----> uni.navigateBack： 返回原頁面

uni.navigateTo({
      url: 'test?id=1&name=uniapp'
});

uni.redirectTo(OBJECT)：關閉當前頁面，跳轉到應用內的某個頁面

uni.reLaunch(OBJECT)：關閉全部頁面，打開到應用內的某個頁面

uni.switchTab(OBJECT)：跳轉到tabBar頁面，並關閉其餘全部非tabBar頁面

// -----> pages.json:

{
      "tabBar": {
      "list":   [{
            "pagePath": "pages/index/index",
            "text": "首頁"
       },{
            "pagePath": "pages/other/other",
            "text": "其餘"
      }]
   }
}

//  ------> other.vue:

uni.switchTab({
      url: '/pages/index/index'
});

uni.navigateBack(OBJECT)：關閉當前頁面，返回上一頁面或多級頁面。

可經過 getCurrentPages() 獲取當前的頁面棧，決定須要返回幾層。

注意：

頁面跳轉路徑有層級限制，不能無限制跳轉新頁面
路由API的目標頁面必須是在pages.json裏註冊的vue頁面。
若是想打開web url，H5平臺使用 window.open；小程序平臺使用web-view組件（url需在小程序的聯網白名單中）
navigateTo, redirectTo 只能打開非 tabBar 頁面。
switchTab 只能打開 tabBar 頁面。
reLaunch 能夠打開任意頁面。
頁面底部的 tabBar 由頁面決定，即只要是定義爲 tabBar 的頁面，底部都有 tabBar。
不能在 App.vue 裏面進行頁面跳轉

6、頁面棧web

與微信小程序相同，框架以棧的形式管理當前全部頁面，當發生路由切換的時候，會有頁面出棧、入棧變化

初始化、打開新頁面：新頁面入棧
頁面重定向：當前頁面出棧、新頁面入棧
頁面返回：頁面所有出棧、只留下新的Tab頁面
Tab切換、重加載：頁面所有出棧、只留下新的頁面

運行環境判斷

開發環境和生產環境：經過process.env.NODE_ENV判斷 'development'/'production'
在HBuilderX 中，點擊「運行」編譯出來的代碼是開發環境，點擊「發行」編譯出來的代碼是生產環境

頁面樣式與佈局
尺寸單位

px 即屏幕像素
upx 是uni-app提供的一種根據屏幕寬度自適應的動態單位。【以750寬的屏幕爲基準，屏幕變寬，upx實際顯示效果會等比放大】
vh 是視窗高度的百分比

upx轉換：設計稿 1px / 設計稿基準寬度 = 框架樣式 1upx / 750upx
頁面元素寬度： 750 * 元素在設計稿中的寬度 / 設計稿基準寬度
HBuilderX中自動轉換px爲upx工具：https://ask.dcloud.net.cn/article/35445
upx2px

upx是編譯器處理的，手機端靜態賦值生效，動態賦值沒法生效。

可以使用 uni.upx2px(Number) 轉換爲 px 後再賦值。

<script>
   export default {
        computed: {
           halfWidth() {
                 return uni.upx2px(750 / 2) + 'px';
           }
       }
   }
</script>

樣式導入

<style>
      @import "../../common/uni.css";
</style>

內聯樣式：儘可能避免將靜態的樣式寫進 style 中，以避免影響渲染速度
```
<view :style="{color:color}" />

<view class="normal_view" />
```
選擇器： .class、#id、element、element, element
特殊：

::before、 ::after —— eg: view::after 在 view 組件後邊插入內容，僅微信小程序和5+App生效
在uni-app中不能使用*選擇器
page至關於body節點
```
page {
     background-color:#ccc;
}
```

背景圖片：與普通web項目相同 background-image: url('~@/static/logo.png');

注意：支持base64格式圖片；支持網絡路徑圖片
使用本地路徑背景圖片需注意：

① 圖片小於 40kb，uni-app 會自動將其轉化爲 base64 格式；
② 圖片大於等於 40kb，需開發者本身將其轉換爲base64格式使用，
或將其挪到服務器上，從網絡地址引用。
③ 本地背景圖片的引用路徑僅支持以 ~@ 開頭的絕對路徑（不支持相對路徑）vue-cli

<template/> 和 <block/>並非一個組件，它們僅僅是一個包裝元素，不會在頁面中作任何渲染，只接受控制屬性

條件渲染

<template>
     <view>
         <template v-if="test">
             <view>test 爲 true 時顯示</view>
         </template>
         <template v-else>
              <view>test 爲 false 時顯示</view>
         </template>
      </view>
</template>

列表渲染

<template>
     <view>
         <block v-for="(item,index) in list" :key="index">
                   <view>{{item}} - {{index}}</view>
         </block>
      </view>
</template>

注：以上內容來自UniApp官網npm