uni |
您所在的位置:网站首页 › 2021最新h5源码 › uni |
最近,有个需求需要开发H5应用和微信小程序。如果针对不同的平台开发自己的一套代码,那将是一件很糟糕的事情:如果下次需要兼容支付宝小程序、快应用,那工作量随着平台的添加而快速增加。所以我们选择了uni-app开发。 uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。 工具要求安装微信开发者工具稳定版 安装HBuilderX极客开发工具 谷歌浏览器/火狐浏览器/... 新建项目这里可直接参考官网的创建uni-app。 1. 文件 => 新建 => 项目 2. 选择uni-app => 填写项目的名称 => 选择项目的存放位置 => 选择uni-app项目模版 => 点击创建 复制代码 开启h5和微信小程序开启h5: 开启微信小程序: 示例:是Mac配置 配置微信开发者工具路径接下来就是对需求的开发了,嗯~ 都是搬砖的事情,我们简单聊聊其中需要注意的点⚠️。 1. 尺寸单位uni-app支持的通用css单位包括 px、rpx。 px 和 rpx之间的转换关系如下: 设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx 换言之,页面元素宽度在uni-app中的宽度计算公式: 750 * 元素在设计稿中的宽度 / 设计稿基准宽度 举例说明: 若设计稿宽度为 750px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 750,结果为:100rpx。 若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 640,结果为:117rpx。 若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在 uni-app 里面的宽度应该设为:750 * 200 / 375,结果为:400rpx。 2. 网络请求线上小程序运行时,网络相关的 API 在使用前需要配置域名白名单 使用示例: uni.request({ url: 'https://www.example.com/request', // demo url method: 'GET', data: {}, header: {}, success: res => { console.log(res.data) }, fail: () => {}, complete: () => {} }) 复制代码 3. 路由与页面跳转uni.navigateTo: 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。 比如: uni.navigateTo({ url: 'pages/test?id=1&name=uniapp' }); 复制代码uni.redirectTo: 关闭当前页面,跳转到应用内的某个页面。 比如: uni.redirectTo({ url: 'pages/test?id=1&name=uniapp' }); 复制代码uni.reLaunch: 关闭所有页面,打开到应用内的某个页面。 比如: uni.reLaunch({ url: 'pages/test?id=1&name=uniapp' }); 复制代码uni.switchTab: 跳转到tabBar页面,并关闭其他所有非tabBar页面。 比如: uni.switchTab({ url: 'pages/index/index' // 切换到设置的tabBar首页index页面 }) 复制代码uni.navigateBack: 关闭当前页面,返回上一页或多级页面。可通过getCurrentPages() 获取当前的页面栈,决定需要返回几层。 比如: uni.navigateBack() 复制代码 4. rich-text富文本组件当我们需要展示带有标签名称内容(即富文本)的时候,如果是单纯的使用text和view的组件,是不能够正确展示出来的,需要使用rich-text组件。 5. 小程序本地开发的模式配置开发调试的时候,需要固定调试一个页面内容。这个配置就很有必要了。 在pages.json中配置即可,比如: "condition": { // 模式配置,仅在开发期间生效 "current": 0, // 当前激活的模式(list索引项) "list": [{ "name": "swiper", // 模式的名称 "path":"pages/component/swiper/swiper",//启动页面,必选 "query":"interval=4000&autoplay=false"//启动参数,在页面的onLoad函数里面得到。 }, { "name":"test", "path":"pages/component/switch/switch" }] } 复制代码具体实操: "condition": { "current": 0, "list": [{ "name": "首页", "path":"pages/index/index" }, { "name":"忘记密码", "path":"pages/forget/forget" }, { "name":"登陆", "path":"pages/login/login" }] } 复制代码在项目的pages.json中配置pages和tabBar字段,如下: "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app" } }, { "path": "pages/center/center", "style": {} } ], "tabBar": { "borderStyle": "black", "color": "#8F8F94", "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/center/center", "text": "我的" }] } 复制代码当然,你可以在tabBar -> list字段中添加iconPath和selectedIconPath来表示未选中和选中状态。 7. 微信小程序报forceUpdate错误报错信息如下:TypeError: Cannot read property 'forceUpdate' of undefined 原因:没有配置appId,这里直接使用小程序提供的测试appIdwxa5ed8b26512accd9。 在模版html中使用如下: h5 content wechat content 复制代码在javascript中使用如下: onLoad() { // #ifdef H5 console.log("只有h5平台才有console方法") // #endif // #ifdef MP-WEIXIN console.log("只有微信平台才有的console方法") // #endif } 复制代码 发布h5和微信小程序发布h5: 可参考官网发布为H5 最后在项目中生成dist文件。页面入口路径为./unpackage/dist/build/../index.html。 发布微信小程序: 可参考网站发布为微信小程序 需要提前申请一个微信小程序,获取其AppID 后话相关的api内容来源uni-app自官网,截止文章发布2021-07-19为最新。 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |