uniapp 二维码-uni-app 封装接口以及使用

最近要从零开发一个跟后台管理系统对接的小程序,因为功能比较复杂,时间短,选择了比较火的uni-app,因为小程序出现的时间较短,各方面并不完善,开发过程中就是不断踩坑的过程,特此记录一小下。

uni-app虽然功能还不完善,但是插件市场里东西还是不少的,在搭建框架中因为需求要求借鉴了之前开发的PC端,所以有一些跟之前开发VUE相关的插件 ,可以提高开发效率,

插件:

坑:

1.覆盖原生组件,需要用cover-view容器,但是cover-view里可包含的标签有限,类似view等在真机调试时不显示,需全部替换成cover-view,且icon无法显示,可以用cover-imaga代替。

2.小程序和小程序之间的跳转(如腾讯云的人机滑动验证),跳转回来时需要进行操作,此时可以判断中的options,如果按小程序文档中来说当 === 1038时是小程序跳回来的场景,但是部分手机跳回来是为1001,只能将这2种都作为跳转判断的条件。

3.小程序跳转回来app中的onshow有时不执行,这个原因暂未找到

4.在uniapp的H5版本 ,接入 腾讯云滑动验证 ,示例的点击滑动验证元素是通过dom操作的,但是无效,可能跟uniAPP不支持dom操作有关系,采用定制接入方法一,手动调用。

18 年时候有幸接触到 uniapp , 写了一篇

《uni-app 入门到精通》

,由于一些原因,该方案并没有执行,该项目一系列文章也就没有再写下去,所以遭受到了许多人评论的吐槽,到如今公司项目的需求又要根据 uniapp 写 H5 嵌入到 app 中,所以想根据项目实际开发分享一下,有兴趣的伙伴可以参考和吐槽。

这一篇文章主要分享一下内容

uniapp 模板项目有两种初始化方式

由于无法舍弃 VSCode ,我们采用 vue-cli 来初始化项目, HBuilderX 大家可以参照官方文档

这种方式是可以通过 vue 脚手架命令指定模板,这个是 dcloudio 的官方提供模板

我们选择默认模板即可,

成功后我们执行

打开浏览器地址,直接运行即可。

一般刚接触前端的小伙伴可能会对

postcss

不太了解,这里简单介绍一下,

当然 PostCSS 具体使用是需要引入一些插件的,例如常用的是 autoprefixer postcss-preset-env 等, 具体如何使用大家可以自行参考资料,毕竟这块知识还是挺多的就不具体展开解释了。

通常我们在写移动端时候需要做的是页面适配方案的确定, uni-app 支持的通用 css 单位包括 px、rpx , 之前的 upx 方案已经被废弃掉,官方解释是目前市面上已经基本上支持了微信的 rpx 方案,所以 upx 中转方案已经意义不大了,不过还可以继续使用,不过已经不再推荐。

rpx 之初是由微信小程序提出一种方案,即根据宽度来进行适配以 750 宽屏幕为基准, 750rpx 恰好为屏幕宽度, uni-app 规定屏幕基准宽度 750rpx 。所以说如果你们的UI 设计以 750*1334

iphone 6/6s

为基准设计的话,你只需要将屏幕上 px 写为 rpx 即可,不用做任何换算,如果不是的话,你就需要做如下换算:

uniapp 有自己一套路由管理机制,而未采用 vue-route 方案,个人认为这套方案还是比较成熟和好用的,以及可以满足我们日常的需求:

保留当前页面,跳转到应用内的某个页面,使用可以返回到原页面。

2.(OBJECT)

关闭当前页面,跳转到应用内的某个页面。

3.(OBJECT)

关闭所有页面,打开到应用内的某个页面。

注意:

如果调用了 (OBJECT)) 不会关闭,仅触发生命周期 onHide

4.(OBJECT)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

注意:

如果调用了 (OBJECT)不会关闭,仅触发生命周期 onHide

5.(OBJECT)

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

5.(OBJECT)

预加载页面,是一种性能优化技术。被预载的页面,在打开时速度更快。

以上路由API 已经满足我们的需求,当然进行路由跳转的前提是我们需要在 进行路由配置, 包括路由和具体的样式配置

而进行具体路由跳转我们需要如下,需要多加一个 /

需要特别注意的一点是, 利用浏览器 在 进行 移动H5页面调试时候,会出现页面刷新之后页面栈会消失,此时navigateBack不能返回,如果一定要返回可以使用()导航到浏览器的其他历史记录。

uniapp 提供网络请求的 api 是 ,具体支持的请求方法可以参考官网 method 有效值

不过我们通常不会直接使用,而是进过一系列的封装以方便我们的使用,具体封装接口使用会在随根据页面数据请求一并展示。

1,新建

const BASE_URL = '

https://222222222

/hengyuaniot-propaganda/' //后端给的url

export const myRequest = (options) => {

// ('进来了')

return new Promise((resolve,reject)=> {

// let authtoken = ('authtoken')

({

url:BASE_URL + ,

data: || {},

method: || 'GET',

// header:{

//    'Content-type': 'application/json',

// "X-Auth-Token": ('authtoken')  //这里的token指的是微信授权登录的token,用来判断小程序是否属于登录状态

// },

dataType:'json',

success:res => {

if( !== 0){

}

resolve(res)

},

fail:err => {

// ({

// title:"请求接口失败",

// })

('err',err)

reject(err)

}

})

})

}

2,在全局  引入

//引入公共接口

import {myRequest} from './app/'

//挂载全局

.$myRequest = myRequest

3,使用

integral() {

let me =this

me.$myRequest({

url: 'api/resource/index',

method: 'POST',

data: {

token:me.$,

pageNum: 1,

pageSize:

},

}).then(res => {

// =

()

//成功返回的code码

var code =

(code)

//成功返回的数据

var res =

if(code===200){

},

cracted(){

调用

()

}