企业微信uni-app开发准备

2019-09-25 本文已影响0人柳暗花明又一匪

一、下载安装 HbuilderX

https://www.dcloud.io/

image.png

二、环境准备

1.可以选择配置自己习惯的使用环境

图片1.png

2.安装插件包，工具-插件安装
---安装scss/sass编译
---安装npm

图片2.png

三、uni-app开发介绍

1.目录结构

图片3.png
2.页面配置、生命周期
① pages.json配置 ---
https://uniapp.dcloud.io/collocation/pages?id=pages

{
    "path": "pages/login/index", 
    "style": {
        "navigationBarTitleText": "页面顶部显示导航",
         "enablePullDownRefresh": "值为true/false，配置是否开启下拉刷新功能",
    }
}

注：开启下拉刷新需要在 pages.json做相应的配置

图片4.png

图片5.png

四、项目准备

Git地址：http://git.aylsonclub.com/aihama/uniapp-oa-wap.git
五、页面代码

页面或组件由三部分组成

<template> ---xml代码，类似html代码
<scrpit> ---js代码
<style> --样式代码

Script代码中都需要导出一个响应对象
里面主要包含有
（1）Props组件传入的参数对象数据
（2）Data 一般用于储存页面对应绑定的数据
（3）Methods 主要放置自定义函数方法

ddd.png

六、常用语法

示例数据

    export default {
        data() {
            return {
                mobile: '1234',
                password: '123',
                datas: [{
                    text: 'xxxxxx'
                }, {
                    text: 'xxxxxx'
                }, {
                    text: 'xxxxxx'
                }],
                objects: {
                    a: 1,
                    b: 2,
                    c: 3
                }
            }
        },
        methods: {
            submit: () => {
                console.log('-----------提交')
            }
        }
    }

1.集合遍历 v-for

<view>
    <text v-for="(item,index) in datas">{{item.text}}</text>
</view>

2.集合遍历 map

<view>
    <text v-for="(val,key) in objs">{{val}} {{key}}</text>
</view>

2.v-if 判断语句

<view>
    <text v-for="(item,index) in datas" v-if="index==0">{{item.text}}</text>
</view>

3.:class 处理

<view>
    <text v-for="(item,index) in datas"  :class="index==0?'text-red':''">{{item.text}}</text>
</view>

4.事件绑定，在移动端使用tap触摸事件一般不使用click


<template>
    <view class="padding flex flex-direction">
        <button class="cu-btn bg-blue margin-tb-sm lg" @tap="submit">提交</button>
    </view>
</template>
<script>
    export default {
        data() {return{}},
        methods: {
            submit: () => {
                console.log('-----------提交')
            }
        }
    }
</script>

4.表单提交

// xml代码
<template>
    <form @submit="formSubmitConfirm">
        <view class="cu-form-group margin-top">
            <view class="title">手机号</view>
            <input placeholder="手机号" name="mobile" :value="mobile"></input>
        </view>
        <view class="cu-form-group">
            <view class="title">密码</view>
            <input placeholder="密码" name="password" :value="password"></input>
        </view>
                <view class="padding flex flex-direction">
                <button formType="submit" class="cu-btn bg-blue margin-tb-sm lg" @tap="submit">提交</button>
            </view>
    </form>
</template>
//js代码
<script>
    export default {
        data() {
            return {
                mobile: '15986391019',
                password: '123456'
            }
        },
        methods: {
            formSubmitConfirm: (e) => {
                //--------------提交数据逻辑-------

                //获取表单数据对象
                let formData = e.detail.value
                console.log(formData.mobile) //15986391019
                console.log(formData.password) //123456
                let params = {
                    mobile: formData.mobile,
                    password: formData.password
                }
                http.login({}).then(res => {
                    //请求成功回调
                })


            }
        }
    }
</script>

七、数据请求

     let params = {
          Code: 'xxx',
          Password: 'pwd'
      };
      http.login(params).then(res => {
          uni.hideLoading();
          if (res.statusCode !== 200) return;
          if (res.data.code === "ok") {
            setCurLoginPage();
            uni.showToast({
              title: "登录成功444"
            });
            // 储存用户信息到缓存
            let adminWapUserInfo = res.data.data;
            uni.setStorageSync("adminWapUserInfo", adminWapUserInfo);
            // #ifdef APP-PLUS
            this.updateDeviceInfo(adminWapUserInfo);
            // #endif
            // 跳转到首页
            uni.switchTab({
              url: "/pages/home/home"
            });
          } else {
            uni.showModal({
              content: res.data.msg
            });
          }
        });

多个请求同时处理

        
let promise1 = new Promise((resolve, reject) => {
    http.getList1({id:'xxx'}).then(res => {
        resolve(res)
    }).catch(err => {
        reject(err)
    })
})
        
let promise2 = new Promise((resolve, reject) => {
    http.getList2({id:'xxx'}).then(res => {
        resolve(res)
    }).catch(err => {
        reject(err)
    })
})

Promise.all([promise1, promise2]).then(args => {
    //请求成功逻辑，请求回来的数据在  args 数组中
}).catch(err=>{
    //请求失败报错逻辑
})

七、消息弹窗

官网参考https://uniapp.dcloud.io/api/ui/prompt?id=showmodal

效果参考

uni.showToast({
    title:'消息提示框'
})

image.png

uni.showLoading({
    title:'加载中'
})

image.png

类似于标准 html 的消息框：alert、confirm。

uni.showModal({
    title: '提示',
    content: '这是一个模态弹窗',
    success: function (res) {
        if (res.confirm) {
            console.log('用户点击确定');
        } else if (res.cancel) {
            console.log('用户点击取消');
        }
    }
});