uni-app框架-学习心得（持续更新）

本项目设计计划使用微信小程序的方式进行展示

uni-app具有如下特点：

跨平台更多：一套代码，多端发行！

运行体验更好：组件、api与微信小程序一致，兼容weex原生渲染。

通用技术栈，学习成本更低 vue的语法、微信小程序的标签和api，内嵌mpvue开源框架

开放生态，组件更丰富：支持npm安装第三方包，支持微信小程序自定义组件及SDK，兼容mpvue组件及项目，App端支持和原生混合编码，Dcloud将发布插件市场

开发一次，多端覆盖：小程序、android、ios、H5。条件编译，解决各端差异。通过 #ifdef、#endif 的方式，为不同端编译不同的代码

对于本项目，uni-app能够方便我们编码与操作，且其框架学习较为容易，成本低，本项目基于客户端与服务器端，即cs模式，uniapp中 weapp.socket.io 能够很好的契合本项目。

 

1.uni-app的框架简介

创建uni-app项目之后，会一般都会包含以下文件

┌─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            配置页面路由、导航条、选项卡等页面类信息，

2.环境搭建

安装编辑器HbuilderX 下载地址，HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。下载App开发版，可开箱即用，安装微信开发者工具 下载地址

3.运行项目
在菜单栏中点击运行，运行到浏览器，选择浏览器即可运行

在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app

在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机

注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功 微信开发者工具在设置中安全设置，服务端口开启

4.文件引入

5.生命周期

 1）应用生命周期（同微信小程序）

注意：应用生命周期仅可在App.vue中监听，在其它页面监听无效。

2）页面生命周期（同微信小程序）

 

 3）组价生命周期（同vue）

 6.路由

 7.运行环境

8.页面样式与布局

1）单位：px，rpx

px无法动态适应不同宽度的屏幕，rem无法用于nvue/weex。如果想使用根据屏幕宽度自适应的单位，推荐使用rpx，全端支持。

px:屏幕像素

rpx:响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App 端和 H5 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算

设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

2）选择器：.class、id、element、element element、 ::after、::before

注意：在 uni-app 中不支持*选择器；元素选择器里没有body，改为了page。微信小程序即是如此。

3）内联样式

style：一般接收动态的样式（请尽量避免将静态的样式写进 style 中，以免影响渲染速度）<view :style="{color:color}" />

class：指定静态样式 <view class="normal_view" />

4）全局/局部样式

全局样式：定义在 App.vue 中的样式，作用于每一个页面。注意：nvue页面暂不支持全局样式。

局部样式：在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。

9.HBuilderX常用快捷键

 

 

demo实现登录界面

 

 

代码：

<template>
    <view class="register">
        //<u-avatar v-show="false" :src="imgsrc"></u-avatar>
        <u-form label-position="left" :error-type="errorType" ref="uForm" :model="form">
            <u-form-item label="用户名:" label-width=135px; prop="userName">
                <u-input type="text" v-model="form.userName" placeholder="请输入用户名" />
            </u-form-item>
            <u-form-item label="昵称:" prop="nickName">
                <u-input type="text" v-model="form.nickName" placeholder="请输入昵称" />
            </u-form-item>
            <u-form-item label="密码:" prop="password">
                <u-input type="password" v-model="form.password" password="true" placeholder="请输入密码" />
            </u-form-item>
            <u-form-item label="电话号码:" label-width=135px; prop="phonenumber" maxlength="11">
                <u-input type="number" v-model="form.phonenumber" placeholder="请输入电话号码" />
            </u-form-item>
            <u-form-item>
                <u-radio-group v-model="form.sex">
                    <u-radio v-for="(item,index) in list" :key="index" :name="item.sex" :disabled="item.disabled">
                        {{item.value}}
                    </u-radio>
                </u-radio-group>
            </u-form-item>
            <u-form-item label="邮箱:" prop="email">
                <u-input type="email" v-model="form.email" placeholder="请输入邮箱" />
            </u-form-item>
            <u-form-item label="身份证号码:" label-width=135px; prop="idCard" placeholder="请输入身份证号码">
                <u-input type="idcard" v-model="form.idCard" />
            </u-form-item>
            <u-button @tap="register">注册</u-button>
        </u-form>
        <view class="other">
            <navigator url="/pages/login/login">已有账户,点击登入</navigator>
        </view>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                errorType: ['message'],
                imgsrc: '../../static/4068DBAD4FB786E27344EFA0866DC4AF.jpg',
                form: {
                    userName: '',
                    nickName: '',
                    password: '',
                    phonenumber: '',
                    email: '',
                    idCard: '',
                    sex: '',
                    
                },
                //这里写的是一些验证规则
                rules: {
                    userName: [{
                            max: 6,
                            message: '不能大于6',
                            trigger: 'change'
                        },
                        {
                            required: true,
                            message: '请输入用户名',
                            trigger: ['change', 'blur']
                        }
                    ],
                    nickName: [{
                        required: true,
                        message: '请输入昵称',
                        trigger: ['change', 'blur']
                    }],
                    password: [{
                            pattern: /^[a-zA-Z]\w{5,17}$/,  //正则表达式
                            transform(value) {
                                return String(value);
                            },
                            message: '以字母开头，长度在6~18之间，只能包含字母、数字和下划线',
                            trigger: ['change', 'blur']
                        },
                        {
                            min: 6,
                            max: 18,
                            message: '密码字数6-18之间',
                            trigger: 'change'
                        }, {
                            required: true,
                            message: '请输入密码',
                            trigger: ['change', 'blur']
                        }
                    ],
                    phonenumber: [{
                            required: true,
                            message: '请输入手机号码',
                            trigger: ['change', 'blur']
                        },
                        {
                            max: 11,
                            message: '手机号码不正确',
                            trigger: ['change', 'blur']
                        },
                        {
                            validator: (rule, value, callback) => {
                                return this.$u.test.phonenumber(value);
                            },
                            message: '手机号码不正确',
                            trigger: ['change', 'blur']
                        }, {
                            pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
                            transform(value) {
                                return String(value);
                            },
                            message: '手机号码输入不正确',
                            trigger: ['change', 'blur']
                        }
                    ],
                    email: [{
                        required: true,
                        message: '请输入邮箱',
                        trigger: ['change', 'blur']
                    }, {
                        pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
                        message: '邮箱格式不正确',
                        trigger: ['change', 'blur']
                    }],
                    idCard: [{
                            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                            transform(value) {
                                return String(value);
                            },
                            message: '身份证号码不正确',
                            trigger: ['change', 'blur']
                        },
                        {
                            validator: (rule, value, callback) => {
                                return this.$u.test.idCard(value)
                            },
                            message: '身份证号码输入不正确',
                            trigger: ['change', 'blur']
                        },
                        {
                            required: true,
                            message: '请输入身份证号码',
                            trigger: ['change', 'blur']
                        }
                    ]
                },
                //这个是设置radio
                list: [{
                        value: '男',
                        disabled: false,
                        sex: 0
                    },
                    {
                        value: '女',
                        disabled: false,
                        sex: 1
                    }
 
                ],
                radio: '',
                img: '../../static/4068DBAD4FB786E27344EFA0866DC4AF.jpg'
            }
        },
        mounted() {
            // this.register();
        },
        onReady() {
            this.$refs.uForm.setRules(this.rules);
        },
        methods: {
            register() {
                this.$refs.uForm.validate(valid => {
                        if (valid) {
                            console.log('验证通过');
                        } else {
                            console.log('验证失败');
                        }
                    }),
                    uni.showLoading({
                        title: '加载中..'
                    })
                uni.request({
                    url: 'xxxxxxxxx',  //写接口的
                    data: {    
                        userName: this.form.userName,
                        nickName: this.form.nickName,
                        password: this.form.password,
                        phonenumber: this.form.phonenumber,
                        sex: this.form.sex,
                        email: this.form.email,
                        idCard: this.form.idCard,
                        avatar:this.imgsrc
                    },
                    method: "POST",
                    success: res => {
                        if (res.data.code == 200) {  //注册成功就执行下面这些代码
                            uni.hideLoading();
                            console.log(this.imgsrc);
                            //this.login(res.data);
                            uni.showToast({          //显示注册成功
                                title: '注册成功',
                                mask: true,
                                duration: 1500
                            })
                            setTimeout(() => {
                                uni.navigateTo({     //注册成功跳转登录页面
                                    url: '/pages/login/login',
                                }, 3000);
                            })
                        } else {
                            uni.showToast({ 
                                title: res.data.msg,
                                icon: "none"
                            })
                        }
                    }
                })
            }
        }
    }
</script>
 
<style lang="scss" scoped>
    .other {
        margin-top: 2vh;
        color: #6f6f6f;
        text-align: center;
    }
</style>