若依前端APP版使用教程&企业微信(uni app)

教程网址

名称	网址	备注
图标组件	uni-icons 图标 | uni-app官网

1 增加页面流程

        新增Page>新增API>新增组件(可选)>新增样式(可选)>新增路径(page.json)

1.1 page.json添加如下代码，此文件项目根目录下

 {   "path": "pages/mes/pro/feedback/index",   "style": {     "navigationBarTitleText": "工单报工"   } }

1.2 pages的（pages/mes/pro/feedback/）下面新增index.vue文件，代码如下

                                                                                                                                       提交        import { getUserProfile } from "@/api/system/user"  import { updateUserProfile } from "@/api/system/user"  import  workOrder from "@/api/mes/pro/workorder"  import { listWorkorder} from "@/api/mes/pro/workorder";  export default {    data() {      return {        user: {          nickName: "",          phonenumber: "",          email: "",          sex: ""        },        sexs: [{          text: '男',          value: "0"        }, {          text: '女',          value: "1"        }],        rules: {          nickName: {            rules: [{              required: true,              errorMessage: '用户昵称不能为空'            }]          },          phonenumber: {            rules: [{              required: true,              errorMessage: '手机号码不能为空'            }, {              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,              errorMessage: '请输入正确的手机号码'            }]          },          email: {            rules: [{              required: true,              errorMessage: '邮箱地址不能为空'            }, {              format: 'email',              errorMessage: '请输入正确的邮箱地址'            }]          }        },workorderCode:123456,workorderList: [],// 遮罩层loading: true,// 查询参数        queryParams: {                    workorderCode: null,                    workorderName: null,                    workorderType: null,                    orderSource: null,                    sourceCode: null,                    productId: null,                    productCode: null,                    productName: null,                    productSpc: null,                    unitOfMeasure: null,                    quantity: null,                    quantityProduced: null,                    quantityChanged: null,                    quantityScheduled: null,                    clientId: null,                    clientCode: null,                    clientName: null,                    requestDate: null,                    parentId: null,                    ancestors: null,                    status: 'CONFIRMED',        }  }    },    created() {console.log("created 开始")this.getListWorkOrder()console.log("created 开始")    },onLoad() {      this.getUser()      },    onReady() {      this.$refs.form.setRules(this.rules)    },    methods: {      getUser() {        getUserProfile().then(response => {          this.user = response.data        })      },      submit(ref) {        this.$refs.form.validate().then(res => {          updateUserProfile(this.user).then(response => {            this.$modal.msgSuccess("修改成功")          })        })      },  getListWorkOrder()  {console.log("查询工单开始")listWorkorder(this.queryParams).then(response => {this.workorderList = response.rows;this.loading = false;console.log(response.rows);            });console.log(this.workorderList);console.log("查询工单结束");  }    }  }  page {    background-color: #ffffff;  }  .example {    padding: 15px;    background-color: #fff;  }  .segmented-control {    margin-bottom: 15px;  }  .button-group {    margin-top: 15px;    display: flex;    justify-content: space-around;  }  .form-item {    display: flex;    align-items: center;    flex: 1;  }  .button {    display: flex;    align-items: center;    height: 35px;    line-height: 35px;    margin-left: 10px;  }

2 APP中调用企业微信扫一扫功能

        如果公众号，服务号，小程序，引用相应的artifacetId就行了，可参生作者说明文档

2.1  在pom.xml中文件引用包(主模块)

                           com.github.binarywang                weixin-java-cp                4.5.0            

 2.2  新增企业微信Service的类，需要配合企业微信的APID和应用的配置信息，如下

                // 替换成自己应用的appId和secret，agentId，操作访法，百度或官方文件档

                Integer agentId = 1111111;

                String corpId="XXXXXXXX";

                String corpSecret = "XXXXXXXX";

package com.ktg.web.controller.system;import me.chanjar.weixin.common.bean.WxJsapiSignature;import me.chanjar.weixin.common.error.WxErrorException;import me.chanjar.weixin.cp.api.impl.WxCpServiceImpl;import me.chanjar.weixin.cp.config.impl.WxCpDefaultConfigImpl;import org.springframework.stereotype.Service;@Servicepublic class QywxService {    //获取对应应用的签名    public WxJsapiSignature getJsapiSignture(String url) throws WxErrorException, WxErrorException {        // 替换成自己应用的appId和secret，agentId        Integer agentId = 1111111;        String corpId="XXXXXXXX";        String corpSecret = "XXXXXXXX";        WxCpDefaultConfigImpl config = new WxCpDefaultConfigImpl();        config.setCorpId(corpId);      // 设置微信企业号的appid        config.setCorpSecret(corpSecret);  // 设置微信企业号的app corpSecret        config.setAgentId(agentId);     // 设置微信企业号应用ID        WxCpServiceImpl wxCpService = new WxCpServiceImpl();        wxCpService.setWxCpConfigStorage(config);        System.out.println("WxJsapiSignature===url==="+url);        WxJsapiSignature wxJsapiSignature = wxCpService.createJsapiSignature(url);        //wxJsapiSignature中可以直接获取签名信息 且方法内部添加了缓存功能        return wxJsapiSignature;    }}

 

2.3 新增QywxController的类 

package com.ktg.web.controller.system;import me.chanjar.weixin.common.bean.WxJsapiSignature;import me.chanjar.weixin.common.error.WxErrorException;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.RestController;@RestControllerpublic class QywxController {    @Autowired    private QywxService qywxService;    @GetMapping(value = "/system/qywx/signature/")    public WxJsapiSignature getJsapiSignature(@RequestParam("url") String url) {        try {  // 直接调用wxMpServer 接口            System.out.println("访问WxJsapiSignature=====/system/qywx/signature/" + url + "");            WxJsapiSignature wxJsapiSignature = qywxService.getJsapiSignture(url);            System.out.println("AppId===" + wxJsapiSignature.getAppId());            System.out.println("Timestamp===" + wxJsapiSignature.getTimestamp());            System.out.println("NonceStr===" + wxJsapiSignature.getNonceStr());            System.out.println("Signature===" + wxJsapiSignature.getSignature());            return wxJsapiSignature;        } catch (WxErrorException e) {            return null;        }    }}

2.4 前端项目添加API的配置

3. 表单行内多个组件并排显示

        思路：将一个View，把多个组件包在一起，在使用 display: flex 布局显示

提交    

  .dis-flex {  display: flex !important;  }