uniapp開(kāi)發(fā)總結(jié)

CSS樣式

推薦使用scss

學(xué)習(xí)地址：https://www.sass.hk/

學(xué)習(xí)地址：http://www.ruanyifeng.com/blog/2012/06/sass.html

html標(biāo)簽嵌套和css樣式一一對(duì)應(yīng)，方便維護(hù)

頁(yè)面或組件的第一個(gè)標(biāo)簽的class名稱(chēng)和文件名稱(chēng)一樣

盡量使用 > 子元素選擇器

盡量不在html標(biāo)簽內(nèi)寫(xiě)樣式，當(dāng)html標(biāo)簽內(nèi)的樣式超過(guò)三個(gè)時(shí)，應(yīng)為其建立一個(gè)class

image

動(dòng)態(tài)寫(xiě)入樣式，樣式名應(yīng)改為小駝峰命名，例如：padding-top => paddingTop

image

當(dāng)同類(lèi)別標(biāo)簽只有一個(gè)時(shí)，可以不命名class，使用 > 子元素選擇器對(duì)相應(yīng)的標(biāo)簽設(shè)置樣式

image

頁(yè)面中不同功能模塊之間應(yīng)加注釋并空一行

image

JavaScript

盡量使用es6語(yǔ)法

學(xué)習(xí)地址：http://es6.ruanyifeng.com/

舉例幾點(diǎn)常用規(guī)范：

使用let代替var，常量應(yīng)使用const定義

使用箭頭函數(shù)，可以正常取到頁(yè)面中的this對(duì)象

methods中的方法命名時(shí)應(yīng)加一個(gè)前綴，作者使用的是hd，handle的縮寫(xiě)，以區(qū)別外部引入的方法

方法應(yīng)有備注，并且上下空一行

在功能調(diào)試完后，相關(guān)的打印代碼可保留，但應(yīng)該注釋掉

image

數(shù)據(jù)請(qǐng)求應(yīng)封裝成promise進(jìn)行調(diào)用，并使用try catch處理異常，對(duì)錯(cuò)誤進(jìn)行提示

盡量減少代碼嵌套

image

應(yīng)使用 === 進(jìn)行強(qiáng)類(lèi)型比較，而不是 ==

當(dāng)情況只有兩種時(shí)，盡量用三元運(yùn)算，而不是if else

字符的處理盡量用模板字符串 `` 而不是 + ，變量放在${}里面

image

vuex

學(xué)習(xí)資料：https://vuex.vuejs.org/zh/guide/

vuex的文件結(jié)構(gòu)

store文件夾位于根目錄


image.png

模塊模板，文件名article.js

export default {
        // 命名空間
    namespaced: true,
        // 變量數(shù)據(jù)
    state: {
        detail: {}
    },
        // 獲取變量的快捷方法
    getters: {},
        // 變量寫(xiě)操作
    mutations: {
        SET_detail(state, obj) {
            state.detail = obj
        }
    },
        // 復(fù)雜且異步的方法
    actions: {
        functionName({state, commit, dispatch}, data) {
            return new Promise((resolve, reject) => {
                // 發(fā)出一個(gè)請(qǐng)求
                request().then(res => {
                    // 正確的請(qǐng)求響應(yīng)
                    // 處理數(shù)據(jù),調(diào)用同模塊中的mutations
                    commit('SET_detail', res)
                    // 處理數(shù)據(jù),調(diào)用同模塊中的actions
                    dispatch('functionName2', res)
                    // 返回正確
                    resolve(res)
                }).catch(err => {
                    // 錯(cuò)誤的請(qǐng)求響應(yīng)
                    // 返回錯(cuò)誤
                    reject(err)
                })
            })
        },
        functionName2({state, commit, dispatch}, data) {
            return new Promise((resolve, reject) => {
                resolve()
            })
        }
    }
}

寫(xiě)好的模塊要在index.js中引用

import Vue from 'vue'
import Vuex from 'vuex'
import article from './modules/article'
Vue.use(Vuex)
export default new Vuex.Store({
    modules: {
        article
    }
})

最終在main.js中引用

import Vue from 'vue'
import App from './App'

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

App.mpType = 'app'

const app = new Vue({
    ...App,
    store,
})
app.$mount()

引用模塊中的變量和方法

// 引用變量
const { detail } = this.$store.state.article;
// 引用mutations
this.$store.commit('article/SET_detail', {});
// 引用actions
this.$store.dispatch('article/functionName', {})

Nativejs

js操作移動(dòng)端底層的相關(guān)API

學(xué)習(xí)地址：http://www.html5plus.org/doc/h5p.html

制作一個(gè)全局顯示的組件

相應(yīng)api：http://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View

export default {    
    showWeixinS: {},    
    showWeixinV: {},    
    showWeixinO: {},    
    init() {    
        const screenHeight = plus.screen.resolutionHeight;  
        const screenWidth = plus.screen.resolutionWidth;    
        // 初始化普通遮罩  
        this.showWeixinS = new plus.nativeObj.View("showWeixinS", {
            top: '0px',
        left: '0px',    
            height: '100%', 
            width: '100%',  
            backgroundColor: 'rgba(0,0,0,0.5)'  
        })  
        // 內(nèi)容   
        this.showWeixinV = new plus.nativeObj.View("showWeixinV", { 
            top: (screenHeight - 315) / 2,  
            height: 315,    
            left: (screenWidth - 300) / 2,  
            width: 300  
        }); 
        const time = new Date().getTime();
        this.showWeixinV.draw([
            {   
                // 背景   
                tag: 'rect',    
                color: 'rgb(255,255,255)',  
                rectStyles: {   radius: '10px'  },  
                position: {  width: '300px',  height: '315px'  }
            },  {   
                // 頭像   
                tag: 'img',
                id: time + 'img',   
                src: '/static/logo.png',    
                position: {  top: '28px',  left: (300 - 45) / 2,  width: '45px',  height: '45px'  } 
            },  {   
                tag: 'font',    id: Math.random() * 1000 + time,    
                text: '導(dǎo)師微信',   
                textStyles: {  size: 15,  align: 'center'  },   
                position: {   top: '80px',  left: 0,  width: 300,  height: 21  }    
            },  {
            // 微信號(hào)
                tag: 'font',    
                id: time + 'num',   
                text: 'num',    
                textStyles: {  size: 18,  align: 'center',  overflow: 'ellipsis'  },    
                position: {  top: '104px',  left: 0,  width: 300,  height: 25  }    
            },  {   
                // 按鈕   
                tag: 'rect',    
                color: 'rgba(255, 140, 148, 1)',    
                rectStyles: {  radius: 23  },   
                position: {  top: 150,  left: 40,  width: 220,  height: 46  }   
            },  {   
                // 按鈕文字 
                tag: 'font',    id: Math.random() * 1000 + time,    
                text: '復(fù)制并打開(kāi)微信',    
                textStyles: {  size: 18,  color: 'rgba(255, 255, 255, 1)',  align: 'center',  verticalAlign: 'middle',  overflow: 'ellipsis'  },    
                position: {  top: 150,  left: 40,  width: 220,  height: 46  }   
            },  {
                // 圖標(biāo)
                tag: 'img', 
                id: Math.random() * 1000 + time,    
                src: '/static/images/comm/remind.png', 
                position: {   top: 219,  left: 22,  width: 17,  height: 17  }   
            }, {    
                // 提示文字
                tag: 'font',    
                id: Math.random() * 1000 + time,    
                text: ' 溫馨提示，為了保障您的權(quán)益，跳出APP切勿進(jìn)行私人轉(zhuǎn)賬',   
                textStyles: {  size: 12,  color: 'rgba(153, 153, 153, 1)',  align: 'left',  whiteSpace: 'normal'  },    
                position: {  top: 216,  left: 22,  width: 260,  height: 40  }   
            },  
        ]); 
        //處理遮罩層點(diǎn)擊   
        this.showWeixinS.addEventListener("click", () => { 
            this.showWeixinS.hide();
            this.showWeixinV.hide();    
        }); 
        this.showWeixinO = {    
            imgId: time + 'img',    
            numId: time + 'num'
    };  
    },  

    showWeixin({ num, imgUrl }) {   
        const { showWeixinS, showWeixinV, showWeixinO } = this; 
        const screenHeight = plus.screen.resolutionHeight;  
        const screenWidth = plus.screen.resolutionWidth;    
        showWeixinV.clearRect({ top: '0px', left: '0px', width: '300px', height: '315px' }, showWeixinO.imgId); 
        showWeixinV.clearRect({ top: '0px', left: '0px', width: '300px', height: '315px' }, showWeixinO.numId); 
        showWeixinV.draw([  
            {   
                // 頭像   
                tag: 'img',
                id: showWeixinO.imgId,  
                src: imgUrl,    
                position: { top: '28px',    left: (300 - 45) / 2,   width: '45px', height: '45px',  }   
            },  
            {   
                // 微信號(hào)  
                tag: 'font',
                id: showWeixinO.numId,
                text: num,  
                textStyles: {   size: 18,   align: 'center',    overflow: 'ellipsis'    }, 
                position: { top: '104px',   left: 0,    width: 300, height: 25  }   
            },  
        ]); 
        // 點(diǎn)擊按鈕 
        this.showWeixinV.addEventListener("click", (e) => { 
            const top = (screenHeight - 315) / 2 + 150; 
            const left = (screenWidth - 300) / 2 + 40;  
            if (top < e.screenY && e.screenY < top + 46 && left < e.screenX && e.screenX < left + 220) {    
                uni.setClipboardData({  
                    data: num,  
                    success: () => {    
                        console.log('success'); 
                        plus.runtime.launchApplication({ 
                            pname: 'com.tencent.mm', 
                            extra: { url: 'http://www.html5plus.org' }
                        },  function(e) {   
                            alert('Open system default browser failed: ' + e.message);  
                        }); 
                    },  
                    fail:(err) => { 
                        console.log('err', err);    
                    }   
                }); 
            }   
        }); 
        showWeixinS.show()  
        showWeixinV.show()  
    },  
    // 關(guān)閉彈窗 
    hideWeixinPanel() { 
        const { showWeixinS, showWeixinV } = this;  
        showWeixinS.hide(); 
        showWeixinV.hide(); 
    }
}

在main.js引用到全局進(jìn)行調(diào)用

// 私有子窗口
import msv from './utils/mySubView.js'
Vue.prototype.$msv = msv;

效果


image.png

使用uniapp的subNVue

配置：https://uniapp.dcloud.io/collocation/pages?id=subpackages
相關(guān)API：https://uniapp.dcloud.io/api/window/subNVues?id=app-getsubnvuebyid

以下舉例制作全局引用

文件路徑


image.png

在引用的頁(yè)面需在pages.json中配置


image.png

子窗口：showWeixin.nvue

<template>
    <div class="show-weixin">
        <image class="sw-image" :src="imgUrl"></image>
        <text style="font-size: 30rpx; margin-top: 10rpx;">導(dǎo)師微信</text>
        <text style="font-size: 36rpx; font-weight:500; margin-top: 10rpx;">{{ num }}</text>
        <div class="sw-button" @click="hdGotoWeixin"><text class="swb-text">復(fù)制并打開(kāi)微信</text></div>
        <div class="sw-remind">
            <image class="swr-image" src="../../../static/images/comm/remind.png"></image>
            <text class="swr-text">溫馨提示，為了保障您的權(quán)益，跳出APP切勿</text>
            <text class="swr-text">進(jìn)行私人轉(zhuǎn)賬</text>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            num: '',
            imgUrl: ''
        };
    },
    created() {
        const subNVue = uni.getSubNVueById('showWeixin');
        subNVue.onMessage(msg => {
            // console.log('監(jiān)聽(tīng)來(lái)自所屬頁(yè)面的 message' + JSON.stringify(msg));
            const { num, imgUrl } = msg.data;
            this.num = num;
            this.imgUrl = imgUrl;
        });
    },
    methods: {
        // 前往微信
        hdGotoWeixin() {
            const { num } = this;
            // console.log('hdGotoWeixin', num);
            uni.setClipboardData({
                data: num,
                success: () => {
                    console.log('success');
                    plus.runtime.launchApplication(
                        { pname: 'com.tencent.mm', extra: { url: 'http://www.html5plus.org' } },
                        function(e) {
                            alert('Open system default browser failed: ' + e.message);
                        }
                    );
                    const subNVue = uni.getSubNVueById('showWeixin');
                    subNVue.hide('fade-in', 200);
                },
                fail: err => {
                    console.log('err', err);
                }
            });
        }
    }
};
</script>

<style scoped>
.show-weixin {
    flex: 1;
    border-radius: 20rpx;
    background-color: #ffffff;
    flex-direction: column;
    align-items: center;
}
.sw-image {
    width: 90rpx;
    height: 90rpx;
    border-radius: 45rpx;
    margin-top: 56rpx;
}
.sw-button {
    width: 440rpx;
    height: 90rpx;
    margin-top: 40rpx;
    background-color: rgba(255, 140, 148, 1);
    border-radius: 45rpx;
    justify-content: center;
    align-items: center;
}
.swb-text {
    font-size: 30rpx;
    color: #ffffff;
}
.sw-remind {
    width: 520rpx;
    margin-top: 48rpx;
    flex-direction: row;
    flex-wrap: wrap;
}
.swr-image {
    width: 34rpx;
    height: 34rpx;
    margin-right: 10rpx;
}
.swr-text {
    font-size: 24rpx;
    color: rgba(153, 153, 153, 1);
}
</style>

相關(guān)頁(yè)面引用

        // 把微信號(hào)寫(xiě)到粘貼板
        hdGetNum() {
            const { weChatNo, merchantImage } = this.audio;
            const subNVue = uni.getSubNVueById('showWeixin');
            subNVue.postMessage({
                num: weChatNo,
                imgUrl: `${this._API.fileUrl}${merchantImage}`
            });
            subNVue.show('fade-in', 250);
        },

常用uniapp插件

下拉刷新，可npm安裝：https://ext.dcloud.net.cn/plugin?id=343

自定義頭部：https://ext.dcloud.net.cn/plugin?id=974

圖片裁剪：https://ext.dcloud.net.cn/plugin?id=1076

分享：https://ext.dcloud.net.cn/plugin?id=482

常用npm模塊

時(shí)間日期格式轉(zhuǎn)化 moment：http://momentjs.cn/docs/#/displaying/

表單校驗(yàn) validator：https://www.npmjs.com/package/validator

最后編輯于 ：
?著作權(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)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

  • uni-app跨平臺(tái)框架官方教程 鏈接：https://ke.qq.com/course/343370 一、框架簡(jiǎn)...
    Neyo_涼閱讀 36,659評(píng)論 0贊 43
  • 1.基礎(chǔ)問(wèn)題 1. = 和 == 和 === 的區(qū)別？ = : 用于賦值== : 用于判斷=== : 用于判斷，必...
    月光在心中閱讀 2,485評(píng)論 0贊 6
  • 選擇qi：是表達(dá)式 標(biāo)簽選擇器 類(lèi)選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    love2013閱讀 2,441評(píng)論 0贊 11
  • 前端開(kāi)發(fā)面試知識(shí)點(diǎn)大綱： HTML&CSS： 對(duì)Web標(biāo)準(zhǔn)的理解、瀏覽器內(nèi)核差異、兼容性、hack、CSS基本功：...
    秀才JaneBook閱讀 2,780評(píng)論 0贊 25
  • 前端開(kāi)發(fā)知識(shí)點(diǎn) HTML&CSS對(duì)Web標(biāo)準(zhǔn)的理解、瀏覽器內(nèi)核差異、兼容性、hack、CSS基本功：布局、盒子模型...
    Hebborn_hb閱讀 896評(píng)論 0贊 1

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