uniapp使用的注意事項(xiàng)

uniapp的特點(diǎn)

  • 一次開發(fā)，多端應(yīng)用
  • 使用微信小程序的組件標(biāo)簽和API，使用vue的模板語法和js語法

創(chuàng)建新頁(yè)面

  • 小程序： 在app.json中配置pages,即會(huì)在pages文件夾中創(chuàng)建相應(yīng)的文件
  • uniapp: 在pages.json中配置頁(yè)面，但不會(huì)同步的生成文件
  • uniapp: 在pages文件夾上右鍵，新建頁(yè)面，會(huì)同步的在pages.json中自動(dòng)生成對(duì)應(yīng)的配置

pages.json中pages的配置相當(dāng)于路由，所有頁(yè)面都需要在此注冊(cè)

tabBar的配置

在pages.json中配置

本地靜態(tài)資源，比如圖片，圖標(biāo)文件一定要放在static文件夾中，引用地址的方式參考下方代碼

"tabBar": {
        "color": "#567788",
        "selectedColor": "#f96677",
        "list": [
          {
            "pagePath": "pages/index/index",
            "text": "首頁(yè)",
            "iconPath": "/static/images/icon0.png",
            "selectedIconPath": "/static/images/icon1.png"
          },
          {
            "pagePath": "pages/category/category",
            "text": "分類",
            "iconPath": "/static/images/icon2.png",
            "selectedIconPath": "/static/images/icon3.png"
          }
        ]
}

頁(yè)面導(dǎo)航欄標(biāo)題文本，背景顏色，下拉刷新等相關(guān)配置

小程序： 在app.json中全局配置，在每個(gè)頁(yè)面的json文件中給當(dāng)前頁(yè)面配置
uniapp: 全局和每個(gè)頁(yè)面的配置都在pages.json中實(shí)現(xiàn)

如何運(yùn)行在微信開發(fā)者工具

  • 運(yùn)行-> 運(yùn)行到小程序模擬器 -> 微信開發(fā)者工具

  • 在彈窗中要定位開發(fā)者工具的安裝路徑：常規(guī)安裝位置 c:/Program Files/Tencent/微信web開發(fā)者工具

  • 在微信開發(fā)者工具管理項(xiàng)目的界面 -> 設(shè)置 -> 安全 -> 開啟服務(wù)端口
    如果沒有開啟服務(wù)端口，在Hbuiler編譯界面會(huì)報(bào)錯(cuò)：Error: read EBADF

  • 在manifest.json中填寫微信小程序的appid

    如果沒有填寫，在微信開發(fā)者工具中會(huì)報(bào)錯(cuò)：TypeError: Cannot read property 'forceUpdate' of undefined

使用vuex狀態(tài)管理工具

和vue唯一的不同是不需要安裝vuex包

  • 創(chuàng)建store文件夾，和index.js，及相關(guān)的state,actions,mutations...
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        city: '鄭州'
    },
    actions: {
        getData(ctx,city){
            setTimeout(()=>{
                let newCity = city
                ctx.commit("changeData",newCity)
            },5000)
        }
    },
    mutations: {
        changeData(state,data){
            state.city = data;
        }
    }
})
  • 在main.js中引入store并注冊(cè)
  • 在頁(yè)面中使用時(shí)和vue相同

在項(xiàng)目中使用sass

  • 在*.vue文件中添加lang="scss"
<style lang="scss">
</style>
  • 如果沒有安裝sass,在編譯時(shí)會(huì)報(bào)錯(cuò)
  • 可在“工具”菜單，選插件安裝，會(huì)打開插件市場(chǎng)的鏈接，選擇sass,按照引導(dǎo)安裝插件即可
  • 項(xiàng)目初始化時(shí)創(chuàng)建的uni.scss文件不用導(dǎo)入，定義的變量可直接在任一頁(yè)面中使用
  • 引入scss和css文件的語法
<style lang="scss">
    @import  "./var.scss";
    @import "./header.css";
</style>

條件編譯

條件編譯是用特殊的注釋作為標(biāo)記，在編譯時(shí)根據(jù)這些特殊的注釋，將注釋里面的代碼編譯到不同平臺(tái)。

// #ifdef H5
    alert("只有h5平臺(tái)才有alert方法")
// #endif

判斷平臺(tái)

  1. 編譯期判斷 編譯期判斷，即條件編譯，不同平臺(tái)在編譯出包后已經(jīng)是不同的代碼。
  • 在*.vue文件中，template,script,style中都可以添加條件編譯，注意在不同區(qū)塊中注釋的寫法是不同的
<!-- #ifdef H5 -->
    <view>當(dāng)前城市： {{$store.state.city}}</view>
<!-- #endif  -->

<!-- #ifdef MP-WEIXIN -->
    <view>當(dāng)前溫度： 18度</view>
<!-- #endif  -->

<!-- #ifdef APP-PLUS -->
    <view>當(dāng)前溫度： 18度</view>
<!-- #endif  -->
  1. 運(yùn)行期判斷 運(yùn)行期判斷是指代碼已經(jīng)打入包中，仍然需要在運(yùn)行期判斷平臺(tái)

只能區(qū)別機(jī)型（ios,Android）

switch(uni.getSystemInfoSync().platform){
    case 'android':
       console.log('運(yùn)行Android上')
       break;
    case 'ios':
       console.log('運(yùn)行iOS上')
       break;
    default:
       console.log('運(yùn)行在開發(fā)者工具上')
       break;
}

CSS變量

  • --status-bar-height 系統(tǒng)狀態(tài)欄高度
  • --window-top 內(nèi)容區(qū)域距離頂部的距離
  • --window-bottom 內(nèi)容區(qū)域距離底部的距離

比如：自定義導(dǎo)航欄時(shí)，要空出狀態(tài)欄的位置，可添加一個(gè)空的view進(jìn)行占位

<view>
    <view class="header"></view>
    <view>list文本內(nèi)容</view>
</view>

<style>
    .header {
        height: var(--status-bar-height);
        width: 100%;
        border: 1px solid #007AFF ;
    }
</style>

css單位

rpx

頁(yè)面中引入組件時(shí)的easycom規(guī)范

  • 傳統(tǒng)vue組件，需要安裝、引用、注冊(cè)，三個(gè)步驟后才能使用組件。easycom將其精簡(jiǎn)為一步。

  • 只要組件安裝在項(xiàng)目的components目錄下或uni_modules目錄下，并符合components/組件名稱/組件名稱.vue目錄結(jié)構(gòu)。就可以不用引用、注冊(cè)，直接在頁(yè)面中使用。

在模板中vue和小程序的區(qū)別

動(dòng)態(tài)屬性

//數(shù)據(jù) url="/images/1.jpg"

//vue
<image :src="'http://m.mi.com' + url"></image>
<image :src="`http://m.mi.com${url}`"></image>

//小程序: 動(dòng)態(tài)屬性絕對(duì)不加: ,""內(nèi)部為字符串，需要綁定數(shù)據(jù)時(shí)加{{}}

<image src="http://m.mi.com{{url}}"></image>

標(biāo)簽內(nèi)容顯示相同

//數(shù)據(jù)：  msg="hello"
<view>{{msg}}</view>

循環(huán)遍歷

// vue
<view v-for="(item,index) in list"></view>

//小程序
<view wx:for="{{list}}"></view>

條件渲染

// vue
<view v-if="true"></view>

//小程序
<view wx:if="{{true}}"></view>

用navigator組件進(jìn)行跳轉(zhuǎn)

<view class="container">
    <navigator class="item" v-for="(item,index) in list" :key="index" :url="`/pages/detail/detail?id=${item.id}`">
        <view>id: {{item.id}}</view>
        <view>goodsName: {{item.goods_name}}</view>
    </navigator>
</view>

也可以用uni.navigateTo跳轉(zhuǎn)傳參， 在下一個(gè)頁(yè)面中，通過onLoad(options)接收參數(shù)

模板向js邏輯傳參

uniapp傳參

  <view @click="getData(3)"></view>
  ...
  
  getData(params){
    console.log(params)  //3
  }

小程序傳參

  <view bindtap="getData" data-index="3"></view>
  ...
  
  getData(e){
    console.log(e.currentTarget.dataset.index)  //3
  }

發(fā)行

  • 發(fā)行h5頁(yè)面
    發(fā)行 -> 網(wǎng)站 H5手機(jī)版 ------>把項(xiàng)目編譯打包在unpackage/dist/build/h5
    把該文件夾傳給后端即可 （注意： h5頁(yè)面必須在服務(wù)器下才能正常運(yùn)行）

  • 發(fā)行微信小程序
    發(fā)行--->小程序 微信 -----把項(xiàng)目編譯打包在/unpackage/dist/build/mp-weixin
    可以在微信開發(fā)者工具中直接上傳該版本

  • 發(fā)行為原生APP
    發(fā)行--->原生App 本地打包

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容