返回
快速导航关闭
当前搜索
网站分类
栏目推荐
实用工具
热门标签
子分类:
创奇学院 >微信 >小程序 >小程序开发 » 正文

小程序技术方案,uni-app开发微信小程序和h5应用

小程序开发 更新时间: 发布时间: 小程序开发归档 最新发布 网站地图

#头条创作挑战赛#

本文同步本人掘金平台的文章:
https://juejin.cn/post/6986465633114259469

最近,有个需求需要开发H5应用和微信小程序。如果针对不同的平台开发自己的一套代码,那将是一件很糟糕的事情:如果下次需要兼容支付宝小程序、快应用,那工作量随着平台的添加而快速增加。所以我们选择了uni-app开发。

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

工具要求

  • 安装微信开发者工具稳定版

  • 安装HBuilderX极客开发工具

  • 谷歌浏览器/火狐浏览器/...

新建项目

这里可直接参考官网的创建uni-app。

1. 文件 => 新建 => 项目2. 选择uni-app => 填写项目的名称 => 选择项目的存放位置 => 选择uni-app项目模版 => 点击创建
复制代码

开启h5和微信小程序

开启h5:



开启微信小程序:

示例:是Mac配置

  1. 配置微信开发者工具路径


  1. 开启微信小程序的安全端口


  1. 设置外部web服务调用url,格式:http://本地ip:端口号


  1. 吊起微信开发工具



开发

接下来就是对需求的开发了,嗯~

都是搬砖的事情,我们简单聊聊其中需要注意的点⚠️。

1. 尺寸单位

uni-app支持的通用css单位包括 px、rpx。

px 和 rpx之间的转换关系如下:

设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

换言之,页面元素宽度在uni-app中的宽度计算公式:

750 * 元素在设计稿中的宽度 / 设计稿基准宽度

举例说明:

  1. 若设计稿宽度为 750px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 750,结果为:100rpx。

  2. 若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 640,结果为:117rpx。

  3. 若设计稿宽度为 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"
   }]
}
复制代码


6. 配置底部导航

在项目的pages.json中配置pagestabBar字段,如下:

"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


8. 条件编译

在模版html中使用如下:

<!-- #ifdef H5 --><text>h5 content</text><!-- #endif --><!-- #ifdef MP-WEIXIN --><text>wechat content</text><!-- #endif -->复制代码

在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为最新。

转载请注明:文章转载自 http://www.320g.com/
本文地址:http://www.320g.com/xcxkf/17628.html
考高分网交流群

扫一扫加入QQ交流群

和更多志同道合朋友一起交流,分享干货资料!
创奇学院客服

扫一扫加客服微信

有疑问请咨询创奇学院微信号,在线为您解答!
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 Copyright 320g.com Rights Reserved. Powered · 创奇学院

ICP备案号:陇ICP备2020003353号