毕设把Client端选为微信小程序,一方面是不用花大量时间和精力去学习安卓app,另一方面也是微信小程序适合本次开发:轻量级,有基础用户无需注册,API完整。在申请好微信小程序之后我拿到了APPID,然后创建了一个快速启动的模板。
微信小程序在快速启动当中还是给了一个Hello World的程序,而也用到了其官方的api wx.userinfo,而其项目目录如下:
其中 image和weui.wxss是我后期修理界面的时候加的,weui.wxss是微信官方提供的wxml样式表(设计原则里说要风格统一,我就随便给搞统一了),而image里则是底部菜单栏的icon,其余的大图我都挂到了cdn上面。而微信的api当中请求wx.request是只认可https,且之前必须在官网配置后台服务器(别乱搞,一月只有五次机会了解一下)。除了这连个之外pages是微信小程序的页面,里面包括几个页面就是有几个文件夹,而app.js/app.json/app.wxss作为全局的页面配置项,project.config.json是项目的配置文件。utils是工具js(里面自带一个时间处理的方法,不过我没用过)
第一步我搞了个底部菜单栏:
在app.json配置如下:
{ "pages":[ "pages/index/index", "pages/logs/logs", "pages/help/help" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black", "enablePullDownRefresh": true }, "tabBar": { "color": "#a9b7b7", "selectedColor": "#11cd6e", "borderStyle": "white", "list": [ { "selectedIconPath": "image/scan.png", "iconPath": "image/QRCode.png", "pagePath": "pages/index/index", "text": "扫一扫" }, { "selectedIconPath": "image/help_full.png", "iconPath": "image/help.png", "pagePath": "pages/help/help", "text": "帮助/关于" }] }
当然,路径填好,图片搞进来--(我的icon用的是阿里国际版),在page中创建相关页面,这样一来底部菜单栏就搞定了,剩下就是简单的H5开发了,我这里只遇到一个问题:Basic Auth(微信是不允许第三方认证的),最终不知道手怎么一抖就整出了一个请求头..然后就好了...就好了....
scanner: function () { var that = this; wx.scanCode({ success: (res) => { var urls = 'https://stringair.xin/api-taozi/wechat/product_check_code=' + res.result wx.request({ url: urls, method: 'GET', data: {}, header: { 'Accept': 'application/json', 'Authorization': '不给看的Basic 认证' }, success: function (res) { console.log(res.data.data) console.log(res.data.status) if (res.data.status == 200) { wx.showToast({ title: '成功检测', icon: 'success', duration: 2000 }) res.data.data[0].creatTime = res.data.data[0].creatTime.substring(0, 10) res.data.data[0].updateTime = res.data.data[0].updateTime.substring(0, 10) that.setData({ textHead: '这是正品奥,恭喜!', output: '点击底部按钮继续扫码', pro: res.data.data[0], showviewSu: true, showmain:false, showview404:false, showviewfail:false }) } else if (res.data.status == 404) { wx.showToast({ title: '产品未注册', icon: 'loading', duration: 1000 }) that.setData({ textHead: '抱歉。该商品的未注册或者注册信息已过期', output: '点击底部按钮继续扫码', showviewSu: false, showmain: false, showview404: true, showviewfail: false }) } else if (res.data.status == 500) { wx.showToast({ title: '未知的二维码', icon: 'loading', duration: 1000 }) that.setData({ textHead: '我们仅支持在Stringair平台注册的商品,其他未知二维码无法进行验证', output: '点击底部按钮继续扫码', showviewSu: false, showmain: false, showview404: false, showviewfail: true }) } } }) },
完整项目就移步git吧。。不知道审核能不能过。。我的确是做了个demo而已.