uniapp开发总结

CSS样式

推荐使用scss

学习地址：https://www.sass.hk/

学习地址：http://www.ruanyifeng.com/blog/2012/06/sass.html

html标签嵌套和css样式一一对应，方便维护

页面或组件的第一个标签的class名称和文件名称一样

尽量使用 > 子元素选择器

尽量不在html标签内写样式，当html标签内的样式超过三个时，应为其建立一个class

image

动态写入样式，样式名应改为小驼峰命名，例如：padding-top => paddingTop

image

当同类别标签只有一个时，可以不命名class，使用 > 子元素选择器对相应的标签设置样式

image

页面中不同功能模块之间应加注释并空一行

image

JavaScript

尽量使用es6语法

学习地址：http://es6.ruanyifeng.com/

举例几点常用规范：

使用let代替var，常量应使用const定义

使用箭头函数，可以正常取到页面中的this对象

methods中的方法命名时应加一个前缀，作者使用的是hd，handle的缩写，以区别外部引入的方法

方法应有备注，并且上下空一行

在功能调试完后，相关的打印代码可保留，但应该注释掉

image

数据请求应封装成promise进行调用，并使用try catch处理异常，对错误进行提示

尽量减少代码嵌套

image

应使用 === 进行强类型比较，而不是 ==

当情况只有两种时，尽量用三元运算，而不是if else

字符的处理尽量用模板字符串 `` 而不是 + ，变量放在${}里面

image

vuex

学习资料：https://vuex.vuejs.org/zh/guide/

vuex的文件结构

store文件夹位于根目录

image.png

模块模板，文件名article.js

export default {
        // 命名空间
    namespaced: true,
        // 变量数据
    state: {
        detail: {}
    },
        // 获取变量的快捷方法
    getters: {},
        // 变量写操作
    mutations: {
        SET_detail(state, obj) {
            state.detail = obj
        }
    },
        // 复杂且异步的方法
    actions: {
        functionName({state, commit, dispatch}, data) {
            return new Promise((resolve, reject) => {
                // 发出一个请求
                request().then(res => {
                    // 正确的请求响应
                    // 处理数据,调用同模块中的mutations
                    commit('SET_detail', res)
                    // 处理数据,调用同模块中的actions
                    dispatch('functionName2', res)
                    // 返回正确
                    resolve(res)
                }).catch(err => {
                    // 错误的请求响应
                    // 返回错误
                    reject(err)
                })
            })
        },
        functionName2({state, commit, dispatch}, data) {
            return new Promise((resolve, reject) => {
                resolve()
            })
        }
    }
}

写好的模块要在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操作移动端底层的相关API

学习地址：http://www.html5plus.org/doc/h5p.html

制作一个全局显示的组件

相应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)'  
        })  
        // 内容   
        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: '导师微信',   
                textStyles: {  size: 15,  align: 'center'  },   
                position: {   top: '80px',  left: 0,  width: 300,  height: 21  }    
            },  {
            // 微信号
                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: '复制并打开微信',    
                textStyles: {  size: 18,  color: 'rgba(255, 255, 255, 1)',  align: 'center',  verticalAlign: 'middle',  overflow: 'ellipsis'  },    
                position: {  top: 150,  left: 40,  width: 220,  height: 46  }   
            },  {
                // 图标
                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: ' 温馨提示，为了保障您的权益，跳出APP切勿进行私人转账',   
                textStyles: {  size: 12,  color: 'rgba(153, 153, 153, 1)',  align: 'left',  whiteSpace: 'normal'  },    
                position: {  top: 216,  left: 22,  width: 260,  height: 40  }   
            },  
        ]); 
        //处理遮罩层点击   
        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',  }   
            },  
            {   
                // 微信号  
                tag: 'font',
                id: showWeixinO.numId,
                text: num,  
                textStyles: {   size: 18,   align: 'center',    overflow: 'ellipsis'    }, 
                position: { top: '104px',   left: 0,    width: 300, height: 25  }   
            },  
        ]); 
        // 点击按钮 
        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()  
    },  
    // 关闭弹窗 
    hideWeixinPanel() { 
        const { showWeixinS, showWeixinV } = this;  
        showWeixinS.hide(); 
        showWeixinV.hide(); 
    }
}  

在main.js引用到全局进行调用

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

效果

image.png

使用uniapp的subNVue

配置：https://uniapp.dcloud.io/collocation/pages?id=subpackages
相关API：https://uniapp.dcloud.io/api/window/subNVues?id=app-getsubnvuebyid

以下举例制作全局引用

文件路径

image.png

在引用的页面需在pages.json中配置

image.png

子窗口：showWeixin.nvue

相关页面引用

        // 把微信号写到粘贴板
        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模块

时间日期格式转化 moment：http://momentjs.cn/docs/#/displaying/

表单校验 validator：https://www.npmjs.com/package/validator