uni-app之初使用（未完待续）

新建项目

新建目录/新建页面注意事项

• 新建页面时下面已有在pages.json中注册，在pages.json中配置路由的时候就不用再去手动添加了

配置路由

• 在pages.json中配置路由
• 配置页面头部信息
• 微信小程序中运行tabBar至少有两个，测试时可配置

插件

• 到插件市场中寻找需要的插件
• 安装插件的时候，可写个安装插件的文档，方便开发
• 必要时可修改插件

绑定数据，和vue一样使用v-model

• :value=""和v-model=""的区别是v-model是双向绑定，可使用vue的watch实时监听数据的变化，，value是表单控件数据，不方便做验证等业务

uni-app的生命周期和vue的生命周期

数据加载中

//开启
uni.showLoading({
    title: '加载中'
});

 

uni.hideLoading();

　　

uni-app的消息提示

uni.showToast(OBJECT)

 

uni-app安装第三方包

•     在根目录或者新建一个文件夹
•     右击在文件夹中打开
•    点击文件目录，输入cmd
•    在弹窗中输入要安装的包，例：npm i axios/cnpm i axios

uni-app路由传参

uni.navigateTo({
   url: './illegal_add?aaa=false'
})

 

onLoad(option){
    this.aaa=JSON.parse(option.aaa);
}

　　

uni-app路由传参 之参数是个对象

uni.navigateTo({
    url:'./illegal_add?'+'aaa=true&innerInfo='+encodeURIComponent(JSON.stringify(this.innerInfo))
})

　　

onLoad(option){
    this.disabled=JSON.parse(option.aaa);  
    this.innerInfo=JSON.parse(decodeURIComponent(option.innerInfo));
}

　　

 

uni-app下拉框的使用

<view class="uni-form-item uni-column form_input">
    <view class="title">战时用途</view>
    <picker :class="!disabled ? 'edit_con' :''" :value="wartimeUseIndex" v-model="innerInfo.defenseInfo.wartimeUse":range="wartimeUseArr" @change="bindPickerChange($event,'wartimeUse')" :disabled='disabled'>
        <view class="uni-input">{{wartimeUseArr[wartimeUseIndex]}}</view>
    </picker>
</view>

　　

 

data(){
    return {
        protectionIndex: 0, //防护等级
        protectionArr: this.$dicData.filter(e => e.name === '防护等级')[0].data
    }
}

　　

 

methods:{
    bindPickerChange(e, type) {
        switch (type) {
            case 'protection':
                this.protectionIndex = e.target.value
                break;
            case 'chemical':
                this.chemicalIndex = e.target.value
                break;
            case 'usualUse':
                this.usualUseIndex = e.target.value
                break;
            case 'wartimeUse':
                this.wartimeUseIndex = e.target.value
                break;
            default:
            break;
        }
 
    },
}

　　

 

uni-app中慎用padding-left和padding-right

uni-app项目在手机上运行部分样式炸掉

主要原因：部分标签在小程序/手机、浏览器中渲染的dom不一样

主要标签：

• uni-text---->在app和微信小程序中渲染标签是text
• uni-input ---->在app和微信小程序中渲染标签是input
• uni-textarea---->在app和微信小程序中渲染标签是textarea
• uni-load-more---->在app和微信小程序中渲染组件渲染层级有误
• uni-badge---->在app和微信小程序中渲染组件渲染层级有误
• uni-button---->在app和微信小程序中渲染标签是 button
• ......
•  
•  
•  
• 
•  

uni-app微信小程序运行

• pages.json中的tabBar至少要有两项