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;
        }
 
    },
}