好程式員web前端教育訓練分享之uni-app學習筆記uni-app詳解

　　好程式員web前端教育訓練分享之uni-app學習筆記uni-app詳解，uni-app (一套代碼,多端發行)如果你會使用Vue那咱們繼續吧!

什麼是uni-app?

uni-app 是一個使用 Vue.js 開發所有前端應用的架構，開發者編寫一套代碼，可釋出到iOS、Android、H5、以及各種小程式等多個平台。

誕生背景

多端泛濫 iOS、Android、H5、以及各種小程式多套平台,多套文檔,加大開發維護成本

uni-app特點

1、跨平台

一套代碼多端發行,而不失優雅(條件編譯,保留不同平台獨有特色功能方法調用)

åªä¼ç¼è¯å°ç¨åºâ

åªä¼ç¼è¯XXX

2、通用技術棧,學習成本低

Vue的文法,微信小程式Api,内嵌mpvue可以直接遷移,如果你會Vue可以直接入門

3、生态豐富

支援npm下載下傳第三方子產品,支援小程式自定義元件,SDK,相容mpvue元件,支援原生混合編碼

安裝

可以下載下傳兩個進行配置 ,測試微信小程式與支付寶小程式同步實作

編譯工具下載下傳HBuilderX

微信小程式開發IDE

支付寶小程式 IDE

推薦使用 HBuildX 進行開發

跨多端小程式開發

建立目錄

.打開HBuilderX

.左上角建立項目

.選擇uni-app項目

.下面是提供幾個Demo項目，可以建立學習

.項目名稱能不能大寫，建立項目

運作項目

一、找到建立項目uni裡面的項目目錄

二、找到 manifest.js檔案輸入

1、裡面有所有平台配置檔案

需要不通平台測試,需要分别配置不同平台

2、選擇微信小程式配置

配置小程式AppID

點選最上面工具欄選擇運作

選擇運作到小程式模拟器

選擇微信小程式開發工具

第一次配置小程式開發者工具,需要打開服務

三、打開微信小程式開發左上角小

安全設定，将服務端口開啟。||工具 -> 設定 -> 安全設定，将服務端口開啟。

四、選擇HBuild停止服務,重新運作自動打開編輯工具

.nvue 是對weex的增強。如果你不開發App，那麼你不太需要nvue。

釋出測試

選擇HBuild最上面工具欄,點選釋出進行打包,根據指令行提示在點選微信開發者工具釋出

注意不要直接修改微信開發工具目錄,以HBuild開發目錄為主

目錄介紹

與小程式配置相似

pages //存放分頁目錄static //存放應用引用靜态資源main.js //入口檔案mainfest.json //跨平台所有配置項檔案pages.json //全局配置檔案,類似App.json uni.scss//全局scss檔案,在分頁任何位置,注意 style lang="scss" 需要設定 scssApp.vue // 應用配置，用來配置App全局樣式以及監聽

統一參照uni-app官方文檔

初探uni-app

添加分頁

.滑鼠移動pages右鍵

.右鍵建立頁面,注意檢查pages.json檔案會自動寫入pages項,檔案路徑

pages.json檔案 style 為分頁配置項,類似小程式 page.json

修改 pages.json

知識點: uni-app分頁配置在style裡面寫,globalStyle寫全部樣式配置,在一個配置檔案,這裡是有差別原生小程式開發,具體參照uni-app文檔進行配置 pages.json

配置項

navigationBarBackgroundColor HexColor //#000000 導航欄背景顔色 navigationBarTextStyle String white //導航欄标題顔色，僅支援 black/white navigationBarTitleText String //導航欄标題文字内容 navigationStyle String default //導航欄樣式，僅支援 default/custom。 backgroundColor HexColor //#ffffff 下拉視窗的背景色微信小程式

全局配置

globalStyle: {

//...全局配置}

局部配置參照 pages.style内容

pages數組,決定誰排在前面

修改pages導緻檔案查找失敗,檢查無誤,重新開機編輯工具

pages:[

{
    path: "xxx/xxx/xxx",
    style: {
        //...局部配置        }
}]

系統自帶底部tabBar欄配置

如果配置tabBar需要保證abBar第一個路由,配置在第一個pages的第一個

"tabBar": {

"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
  "pagePath": "pages/component/index",
  "iconPath": "static/image/icon_component.png",
  "selectedIconPath": "static/image/icon_component_HL.png",
  "text": "元件"
}, {
  "pagePath": "pages/API/index",
  "iconPath": "static/image/icon_API.png",
  "selectedIconPath": "static/image/icon_API_HL.png",
  "text": "接口"
}]

}

常用基本操作

優先嘗試根據Vue使用操作,例如使用 v-for 替換wx:for

表達式

僅此而已,有Vue使用相似,不能使用流程控制語句

â{{msg+'Msea'}}{{10-9}}{{0||"NB"}}

â{{'Msea'.indexOf('xxx')!==-1?'å¤ªåæéä»':'no'}}{{"æç±åäº¬å¤©å®é¨".substr(0,2)}}

å±æ§ç»å®

https://www.w3school.com.cn/i/eg_tulip.jpg'"/>

å¨ææ ·å¼

{{

+1}}666777

æä»¤

v-show

â{{'æ¬¢è¿'+name+'ç»é'}}æªç»é!!!!!

â{{val}} {{val+11}}

äºä»¶

<button @click.stop="test2">test</button></view>

周遊

```
{{ item.message }}           
```

{{ index }}. {{ name }}: {{ value }}

路由跳轉

頁面棧最多十層。使用uni.navigateTo頻繁切換,會導緻棧溢出,跳轉失敗

// 非tabbar配置的頁面我們使用 navigateTo跳轉時保留老頁面,一般用于需要傳回uni.navigateTo({

url: "../one/one?name=Msea"})// 跳轉pages.json>tabbar>配置過的頁面,使用 switchTabuni.switchTab({
url: "../one/one"})// 不保留目前頁面,跳轉非配置頁面uni.redirectTo({
url: "../one/one"})

響應式機關rpx

推薦使用最近公告推薦使用rpx替代upx

基于蘋果6 1px =2rpx

width:200rpx;
height:200rpx;
background:red;}.box2{
width:100px;
height:100px;
background:pink;}</style>

節點操作

微信小程式裡面沒有 window,document對象,那如果需要進行dom操作

var query=uni.createSelectorQuery();query.select(".titlerh").boundingClientRect((nodes)=>{

console.log(nodes)}).exec();query.select(".box1")
.boundingClientRect()
.selectAll(".box2")
.boundingClientRect()
.exec((res)=>{
  console.log(res);});

元件

建立檔案夾 components目錄統一寫法,滑鼠右鍵建立元件

所有元件與屬性名都是小寫，單詞之間以連字元-連接配接。

<uni-test/></template><script>
import uniTest from "../../components/test.vue"
export default {
    data() {
        return {};
    },
    methods:{
        test(){
            this.text = "登入";
        }
    },
    components: {
       uniTest //引入元件        }
}</script><style lang="scss">
...style</style>

生命周期

應用生命周期 App.vue

App({

onLaunch (options) {

console.log("小程式初始化");

onShow (options)

console.log("小程式顯示");

onHide () {

console.log("小程式隐藏");

}})

分頁生命周期 pages

Page({

onLoad: function(options) {

// 頁面建立時執行      console.log("頁面加載");

onShow: function() {

console.log("頁面進入");

onReady: function() {

console.log("頁面首次渲染完畢時執行");

onHide: function() {

console.log("頁面離開");

onPullDownRefresh: function() {

// 觸發下拉重新整理時執行    console.log("下拉觸發");
//enablePullDownRefresh 開啟下拉    },

onReachBottom: function() {

// 頁面觸底時執行    console.log("下拉到底");

onShareAppMessage: function (e) {

// 頁面被使用者分享時執行      //通過按鈕調用      
  //點選觸發彈窗      <button open-type="share">分享</button>  
  console.log("使用者分享");  
  return {
      title: '妹子圖檔',
      path: '/pages/index/index', //目前頁面 path          imageUrl: "/images/1.jpg",
      desc: '面向百度開發',
      success: (res) => {
          console.log("轉發成功", res);
      },
      fail: (res) => {
          console.log("轉發失敗", res);
      }
  }

onPageScroll: function() {

console.log("頁面滾動時執行");

onResize: function() {

console.log("螢幕旋轉觸發");

元件生命周期

uni-app components元件支援的生命周期，與vue标準元件的生命周期相同。wx小程式支援生命周期

beforeCreate(){} // 在執行個體初始化之後被調用created(){} // 在執行個體建立完成後被立即調用。beforeMount(){} // 在挂載開始之前被調用。mounted(){} // 挂載到執行個體上去之後調用。beforeDestroy(){} // 執行個體銷毀之前調用。在這一步，執行個體仍然完全可用。

UI元件

uni-ui

使用方法與微信小程式一緻,推薦使用uni-ui

<view style="                background:red;                width:200px;height:100px;                display:inline-block;"
    ></view>
    <view style="background:yellow;width:200px;height:100px;display:inline-block;"></view>
    <view style="background:pink;width:200px;height:100px;display:inline-block;"></view>
    <view style="background:blue;width:200px;height:100px;display:inline-block;"></view></scroll-view>

引入三方UI

例如 Vant Weapp 下載下傳

.根目錄下建立 wxcomponents

.将下載下傳包内部 dist包粘貼到uni-app根目錄wxcomponents檔案夾下

.配置

{

"path" : "pages/one/one",
    "style" : {
        "usingComponents":{
            "van-button": "/wxcomponents/dist/button/index" //參照wx元件引
        }
    }}

.在App.vue,引入樣式

/*每個頁面公共css */
@import "/wxcomponents/dist/common/index.wxss";</style>

.在one分頁内直接使用van-button元件,不需要引入

.注意如果報錯,檢查路徑如果沒有問題,可以選擇重編輯器重新啟動微信開發工具

常用API調用

擷取使用者授權彈窗

擷取頭像昵稱 getUserInfo: function(e) {

app.globalData.userInfo = e.detail.userInfo
this.setData({
    userInfo: e.detail.userInfo,
    hasUserInfo: true
})}

傳回所有使用者授權

wx.getSetting({success:()=>{"傳回使用者所有使用者授權"}})

照相機接口

因為,調用照相機擷取臨時圖檔格式,直接上傳三方伺服器,是不支援的,需要微信做解析,轉發

wx.uploadFile 上傳微信需要做轉發看不到傳輸的參數

uni.chooseImage({

count: 1, //圖檔張數    sizeType: ['original', 'compressed'],//原圖,壓縮圖,    sourceType: ['album', 'camera'],  //本地相冊,拍照    success :res=> {
    const tempFilePaths = res.tempFilePaths//微信小程式圖檔臨時路徑        this.setData({tempFilePaths}); 
}})// 預覽接口viewImgs(index) {
uni.previewImage({
    current: this.data.tempFilePaths[index], // 目前顯示圖檔的http連結        urls:this.data.tempFilePaths // 需要預覽的圖檔http連結清單    });},
//小程式圖檔上傳    fileUplaod() {
uni.uploadFile({
  url: "http://wxs.ixinangou.net/index/index/dofiles",
  filePath: this.data.tempFilePaths[0],
  name: "file", //上傳圖檔key      formData: {
    user: "MSea" //需要額外攜帶參數      },
  header: {
    "content-type": "multipart/form-data"
  },
  success: res => {
    console.log("data");
  }
});

請求

微信原生請求接口

注意設定,不效驗合法域名,回憶怎麼添加合法域名

//GET 會自動拼接參數//queryStringParamsuni.request({

method: "GET",
url: "https://cnodejs.org/api/v1/topics",
data: { 
    uname: "Msea"
},
success: (res) => {
    console.log(res)
}})//POST 預設參數為payLoad,為jsonuni.request({
method: "POST",
url: "https://cnodejs.org/api/v1/topics",
data: { 
    uname: "Msea" 
},
success: (res) => {
    console.log(res)
}})//POST form-data 資料 // 'content-type': 'multipart/form-data'  用于檔案上傳  uni.request({

url: '

https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312

data:{fileId:'123'},
method:'POST',
header: {
    'content-type': 'application/x-www-form-urlencoded'
},
success:function(res){}})

地圖使用

地圖元件

id="map" 
longitude="經度" 
latitude="緯度" 
scale="縮放級别(14)" 
bindcontroltap="點選地圖觸發FN" 
markers="{{添加标記}}" 
bindtap="markertap" 點解地圖觸發
show-location  将地圖中心移置目前定位點，此時需設定地圖元件 show-location 為true。
style="width: 100%; height: 300px;"></map>

移動地圖中心點

移動端測試有效

onShow: function() {

// 地圖上下文對象    this.mapCtx = uni.createMapContext('map');

ckMap(e){
      //小程式不支援 Objcet.assign          var temp={
          iconPath: "/assets/img/local.png",
          id: 0,
          width: 25,
          height: 25,
          ...e.detail
      }
      var markers=this.data.markers;
      markers.push(temp);
      this.setData({markers},()=>{
          var data={
              ...e.detail
          };
          this.mapCtx.moveToLocation(data)
      })
  }

定位

uni.getLocation({

type: 'gcj02', //騰訊地圖坐标系    success:(res)=> {
    const latitude = res.latitude
    const longitude = res.longitude
    }})

使用者授權彈窗

app.json配置檔案

//app.json{

"pages": ["pages/index/index"],

"permission": {

"scope.userLocation": {
  "desc": "熊貓創客需要擷取您的位置親" // 高速公路行駛持續背景定位
}

}}

擷取目前位置并移動地圖中心店

wx.getLocation({

type: 'gcj02', //騰訊地圖坐标系    success: (res) => {
    const latitude = res.latitude
    const longitude = res.longitude
    var temp = {
        iconPath: "/assets/img/local.png",
        id: 0,
        width: 25,
        height: 25,
        latitude,
        longitude
    }
    var markers = this.data.markers;
    markers.push(temp);
    this.setData({
        markers
    }, () => {
        var data = {
            latitude,
            longitude
        };
        this.mapCtx.moveToLocation(data)
    })
}})

vuex

uni-app已經内置了vuex

.在項目的根目錄下，建立一個名為store的檔案夾然

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({

state: {
    num:0
},
mutations: {
    add(store){
            store.num++;
    }
},
actions: {}})export default store

.main.js入口檔案引入

import store from './store'Vue.prototype.$store = store;

const app = new Vue({

...App,
store})app.$mount()

.元件内引入

<view>
    <view>{{num}}</view>
    <button @click="test">test1</button>
</view></template>

import {  
        mapState,  
        mapMutations  
    } from 'vuex';  
export default {
    computed:{
        ...mapState(['num'])
    },
    methods:{
        test() {
            console.log(this.$store.commit("add"))
        }
    }
}</script>

條件編譯

可以安裝支付寶小程式進行測試

#ifdef %PLATFORM%

//這些代碼隻在該平台編譯 #endif

#ifdef ： if defined 僅在某個平台編譯#ifndef ： if not defined 在除裡該平台的其他編譯#endif ： end if 結束條件編譯%PLATFORM% 需要編譯的平台，上面的MP就是各個小程式的意思

常用 %PLATFORM% h5 h5平台MP-WEIXIN 微信小程式MP-ALIPAY 支付寶小程式MP-BAIDU 百度小城MP-TOUTIAO 頭條小程式

總結: 優先使用Vue用法,隻要實作微信開發,支援wx,ui,api,統一使用uni的Api,多看文檔

好程式員web前端教育訓練分享之uni-app學習筆記uni-app詳解

繼續閱讀

[轉]iOS微信小視訊優化心得

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

Android電視機（機頂盒）初次開發的一些經驗分享

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

android 主線程的相關問題

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

面試題解析：你接口測試是怎麼做的？

layui多任務上傳添加進度條