用微信小程序开发app 第1篇
(1) 创建原生小程序项目,已有就不需要创建了
(2) 创建uni-app项目,这里我们通过vue-cli的方式来创建 详见
创建成功后目录如下:
(3)接下来打包一个子应用
(4)把 dist/build/mp-weixin/下的sub_uniapp文件夹拷贝到原生小程序的根目录中。
(5)在文件中增加对应的页面路径 (也可配置分包)
uniapp项目打包后放到原生小程序根目录下,在微信小程序里添加路径。
优点:官方方案,支持vue2和vue3
缺点:
是每次合代码需要手动打包移动,在项目管理时增加了项目的复杂度
如果需要在uni-app中依赖原生小程序中的方法,不好去实现
用微信小程序开发app 第2篇
1.调试
Uniapp在开发过程中提供了非常方便的调试工具,可以在HBuilder X中进行实时预览和调试,方便开发者对程序进行调试。
2.发布
Uniapp可以一次性进行多端发布,开发者只需要进行一次编译,在发布时选择不同的平台,就可以将小程序发布到对应的平台上。
总结起来,Uniapp开发小程序可以提高开发效率,便于编写跨平台小程序。通过熟悉Uniapp的基本使用和API调用,可以帮助开发者更为轻松地开发小程序。
用微信小程序开发app 第3篇
1.页面的组成
每个小程序页面都是由三个组成部分,即视图(view)、数据(data)和逻辑(method)组成。我们需要在文件中编写代码,才能完成一个小程序页面。
2.组件的使用
Uniapp中内置了多个组件,可以避免开发者需要手动编写复杂的HTML和CSS代码,从而使开发变得更加高效。如icon、button、form等,可以在需要的位置进行引入,并设置相应的属性。
用微信小程序开发app 第4篇
uniapp文档中页面路由
home页面:
参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 ‘path?key=value&key2=value2’
homeDetail页面接收参数:
onLoad声明周期中默认参数options,可拿到所有传过来的参数
保留当前页面,跳转到应用内的某个页面,使用可以返回到原页面。
关闭当前页面,跳转到应用内的某个页面。
关闭所有页面,打开到应用内的某个页面。
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
跳转到 tabBar 页面只能使用 switchTab 跳转
关闭当前页面,返回上一页面或多级页面。
用微信小程序开发app 第5篇
为什么要说配置小程序关联公众号呢?
因为我在开发的过程中,遇到过一个客户问我怎么获取用户的 UnionID ,但是我们的小程序并没有关联过任何公众号,公众平台,所以要提前确认一下需求;
获取 UnionID 的条件?
如果开发者拥有多个移动应用、网站应用、和公众帐号(包括小程序),可通过 UnionID 来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号(包括小程序),用户的 UnionID 是唯一的。换句话说,同一用户,对同一个微信开放平台下的不同应用,UnionID是相同的。
为什么要提前配置小程序主体信息呢? 看下图
小程序发布后,非个人类帐号可通过认证方式改名。所以我们在上线前最好把能配置的都配置一下,避免上线以后再去更改审核时间长、需要资料多等麻烦事儿!
只可以跟指定的域名进行网络通信。包括普通 HTTPS 请求()、上传文件()、下载文件() 和 WebSocket 通信()。
聊到这里,不知不觉的,我们的小程序已经准备上线了,我分几步给大家展示
这一步会帮我们打包一下我们写的代码,压缩一下体积,毕竟微信小程序的代码包只能是 2MB大小,如果主包太大,就要考虑分包处理了
这里我们就要注意一下,此时的体验版小程序已经可以正常的给测试大哥做真机测试了
这一步很简单,直接提交审核,但是我们接下来需要录入部分资料来供我们的审核人员测试
用微信小程序开发app 第6篇
开始之前还是先看一下官网对 Uniapp 的介绍,也让我们有个更全面的认识;
Uniapp 是配个 HBuildx 这个开发工具来使用的,所以我们要先下载 Hbuildx 开发工具;
上一步我们已经下载好了 HBuildx 这个开发工具,下一步我们需要创建项目了!
下图我们能看到有 普通项目,有 uni-app 项目
就我个人而言,一般在工作中,我会选择新建普通项目,因为uni-app示例项目虽然很香,但是并不是很利于开发,需要删除很多东西,所以我个人选择的是普通项目;
什么是核心插件呢?
什么是插件市场呢?
比如我们使用 Git 往仓库提交代码,我们就可以 下载 Git 插件,辅助我们使用Git!比如我们格式化代码 我们就可以下载 Prettier 插件,ctrl + K 快捷格式化
到这一步开发前的配置基本上已经完成了,我们要运行一下我们的项目看一下了
① 配置文件,配置微信小程序AppID
微信小程序AppID 哪里来? 登录微信公众平台,开发管理 --> 开发设置中
② 运行微信小程序需要配置 配置开发者工具路径,这样 Hbuildx 才知道去哪里打开微信开发者工具
③ Hbuildx 的配置结束了,我们还需要配置微信开发者工具,不然是会运行失败的
开启微信开发者工具中的服务端口
项目在运行之前我们需要先添加一点点代码才可以运行以后看到效果,不然只是一个白页面,并不是我们想看到的
pages 下面我们新增两个页面,在 当中配置一下基础的tabbar部分
index 代码
H5 代码
用微信小程序开发app 第7篇
(1)创建原生小程序项目
(2)必须使用命令行创建uniapp项目(因为hbuildx安装的项目没有相关依赖和src目录) 详见
(3)在uniapp项目根目录,安装uniapp2wxpack
(4)安装完uniapp2wxpack之后,项目目录会出现以下文件夹
(5)将原生小程序根目录下的所有文件复制到mainWeixinMp文件下
(6)然后在mainWeixinMp/app,json的分包中添加如下分包
(7)运行项目
(8)运行完项目会多出dist文件夹,在微信开发中工具中预览选择此文件夹 dist/dev/mp-weixin-pack
注意:
如果原生小程序的根目录被更改过不再项目最外层,一定要配置uniapp打包的路径:
用插件把原生小程序源代码放到uniapp项目指定目录中,集成一个大项目。
参考文档: