uniapp+unicloud开发微信小程序流程
微信小程序的简单开发流程,我用一个自制已上线的微信小程序 皮皮虎去水印 为例,做一个比较详细的开发流程分析。
框架选择
选择uniapp:
1、为了开发效率,我选择uniapp框架,使用vue3.2语法。相比小程序的自身的框架,该框架开发效率更高,编译后的代码更优。
2、后台我选择的是unicloud云开发,使用nodejs语法,由此前后端我一个人就可以搞定。
准备工作
1. 注册小程序:
在微信公众平台注册一个小程序账号,已有账号可以跳过注册流程。
2. 登录:
登录后,在菜单“设置”-“开发设置”当中的开发设置获取AppID备用,并在其配置服务器域名、消息推送等等。
3. 下载微信小程序开发工具:
小程序最终只能在其专门的开发工具上运行、发布等操作。
4. 下载HBuilder X开发工具:
选择了uniapp框架,可以利用HBuilder X进行开发,方便快捷,大大增加开发效率,值得推荐。还可以利用脚手架方式,但我个人不推荐。
5. 小程序运行配置:
在HBuilder X编辑器顶部菜单 “设置”-“运行配置”-“小程序运行配置”-“微信开发者工具路径”-“浏览”,找到微信开发者工具的安装目录,选取“微信开发者工具.exe”。
开发工作
1. 创建项目:
在HBuilder X编辑器顶部菜左边 “文件”-“新建”-“项目”-“uni-app项目”,选择默认模板,勾选下方的启动unicloud(我选择的阿里云,可以白嫖),最后直接创建。
2. 配置appid:
打开项目根目录中的“manifest.json”-“微信小程序配置”,配置appid。这是为了后面可以直接在微信开发工具中运行做准备,否则就算运行有些功能也不能用,上线前是必须配置appid。
3. 关联云服务空间:
关联云服务空间,一般一个新项目是需要新建一个云服务空间,小项目推荐使用阿里云。
unicloud云开发,使用了nodejs语言,数据库也是JSON格式的文档型数据库,对于前端开发很友好,简单易懂。
具体相关细节、开发文档,参考unicloud官方文档。
4. 创建相关文件:
我自己的项目是创建了common(包括接口管理api/公共样式css/工具类utils等)、components(公共组件,uni_modules也是公共组件)、hooks(vue3衍生出来的公共函数文件夹,可以不用)、subpages(分包页面)、store(vuex管理全局变量、全局方法等)、config.js(配置文件,一些全局配置)。
其他的文件夹基本上就是创建项目的时候自带的,我提到的这些可以根据自己的需要来创建。
5. 配置页面:
在pages页面下创建页面,可以一键创建页面,也可以自己创建文件夹和相应的文件(eg:pages/index/index),最后需要在pages.json中去注册页面,一键创建的页面会自动在pages.json中注册。
更多相关uniapp开发的配置,需要在uniapp官方文档去学习,在这里说不完的。
6. 配置tabbar及globalStyle:
tab页面需要手动配置相关的图标和页面,具体的可以参考我的小程序,也可以到uniapp官方文档去查看相关的配置。
7. 开发页面:
在创建的页面中使用vue开发页面,在这里具体的开发就不多说了,这就涉及到前端技术了,懂的不用说都懂,不懂的说再多也还是要去学习~
前端页面:
- 我就简单的说下我的小程序涉及了哪些页面 - 首页、红包、我的、解析页、解析记录、教程页面、常见问题、设置等等。
- 差不多10个页面,开发周期大概在一周,后期还会不断的更新迭代功能。
后端数据:
- 下载通道2使用了云函数上传,再返回下载,避免下载地址没配置下载域名出现下载失败;
- 调取解析接口走的是云函数,调取第三方接口,习惯写在我的后台进行管理;
- 记录解析数据到数据库,方便了解实时情况;
- 定时任务一个,定时删除云储存的内容,毕竟空间有限,所以使用过了的文件就直接删除;
- 获取公告内容,我做成动态,方便之后紧急情况可以发布公告;
- 配置下载域名,为了方便后期维护,我直接做成接口配置,方便新增接口的时候直接在数据库里面去获取,避免修改源码。
8. 运行到微信开发工具:
在hbuilder x开发工具顶部的“运行”-“运行到小程序模拟器”-“微信开发者工具”。在这里注意,首次运行,需要先打开微信开发者工具的“设置”-“安全”-“服务端口”,这样运行到小程序的时候就可以直接打开,更改了代码保存的时候就会自动刷新到最新状态。
开发调试页面,就是这个流程,路漫漫其修远兮,慢慢开发,记得少掉点头发!!!
9. 配置域名:
开发完成后,接下来就是配置一些相关域名,保证在体验版的时候能够正常使用,体验版跟线上版本差不多,所以最终的测试可以使用体验版进行测试。
10. 发行上线:
在hbuilder x开发工具顶部的“发行”-“小程序-微信”,直接发行到微信开发者工具中,会新打开一个界面显示打包后的代码,会发现读取的是dist/build中的代码,这是正式上线的文件。在微信开发者工具中点击“上传”,就可以上传到小程序后台,在版本管理中直接可以看到。在提交前,可以扫码测试,再决定是否提交,提交审核通过后,可以直接上线。
效果图
首页:
解析页:
红包页:
个人中心:
以上就是简单的开发流程,其中还有很多细节需要在开发中去学习,我在这里就不做过多说明,如果把每个细节写到位,那估计可以写一本书。路漫漫其修远兮,学习的路很长,慢慢学习,慢慢品味,争取少掉点头发~
如果有帮助,可以点赞+收藏+关注,后续有更多知识与您分享!!!
欢迎加入QQ技术群:568984539,加群备注‘地区-名字-技术类型’,以防乱加。
关于本文,如果任何疑问的可以在评论区留言,我看到就会第一时间回复的。
uniapp+unicloud开发微信小程序流程相关推荐
- unicloud开发微信小程序调试预览、体验版无法获取数据
unicloud开发微信小程序使用的云空间是阿里的.使用腾讯自家的配置上简单些,但开始收费了.使用阿里的云空间需要在小程序平台配置域名白名单.问题出在,我已经配置了阿里云空间的域名,在使用体验版小程序 ...
- uni-app快速开发微信小程序、h5、和app
过年在家无聊,尝试使用uni-app开发微信小程序,发现这个框架的跨端功能非常强大,几乎能直接从vue移植过来 下面是项目架构图 应用截图 技术栈: 后端 node +mysql 抓取各大视频网站的数 ...
- uniCloud开发微信小程序摒弃uni-starter的一键登录,使用静默登录
背景: 1.我小程序本身的功能非常简单,不用获取用户头像昵称,只需得到用户唯一标识即可 2.uni-starter的一键登录在微信小程序中必须要授权获取用户头像,或新用户要注册账号.有些新用户会反感导 ...
- uni-app.11.开发微信小程序实现消息订阅
开发微信小程序实现消息订阅 使用场景 订阅消息 一次性订阅消息 长期订阅消息 实现步骤 1.获取模板ID 2.uni.requestSubscribeMessage 3.subscribeMessag ...
- uni-app.10.开发微信小程序的一些小操作
开发微信小程序的一些小操作 退出小程序 使用场景 解决方案 navigator 具体使用 参考资料 隐藏主页按钮 使用场景 解决方案 uni.hideHomeButton 参考资料 微信小程序分享 解 ...
- 使用uni-app开发微信小程序流程
微信小程序注册&开发&发布流程(个人版) 1. 小程序注册 注册地址https://mp.weixin.qq.com/wxopen/waregister?action=step1 注册 ...
- 使用uniapp+unicloud部署微信小程序
1 uniapp+unicloud使用 在HbuiderX创建项目时选择vue3+启用unicloud 选择关联云服务 创建免费云服务,步骤就不详细介绍了. 创建云数据库,根据需求修改权限(增.删.改 ...
- uniapp云开发微信小程序 云函数配置
1.项目根目录下新建云函数文件(cloidfunctions,里面最好有个js文件),如图 2.打开项目根目录的manifest.json文件,选择底部的'源码视图'.找到"mp-weixi ...
- VUE(uni-app框架)开发微信小程序②-for循环
数组类型在uni-app中属于一个比较常见的类型,可是想将数组中的数据展现出来就需要借助循环,今天来认识一下[v-for]循环 先新规一个数组 //数组 list:[{id:0,text:" ...
最新文章
- activiti流程跟踪图简单详解
- Linux中main是如何执行的
- Java jni 底层_Java中的native是如何实现的(JNI)
- 2016蓝桥杯省赛---java---C---8(冰雹数)
- 常见的C语言字符串操作
- Java并发编程实战~并发容器
- cmake编译动态库和静态库
- Python_微信开发
- php 实现mqtt 订阅监听功能出错_IoT物联网实现M2M设备之间联动实战
- python中颜色空间直方图_OpenCV—python 颜色空间(RGB,HSV,Lab)与 颜色直方图
- 【python】一道LeetCode搞懂递归算法!#131分割回文串 #以及刷LeetCode的一点点小心得 [数据结构与算法基础]
- FTP/文件传输协议
- 如何检查Windows网络通信端口占用
- 火山视窗多窗口交互操作
- java gwt开发_java – 如何启动GWT超级开发模式
- SEO逆东子站生成和权重站提交工具
- C语言 编写函数Fun1实现分段函数运算,并返回函数值。在主函数调用Fun1函数,接收输入的x值,并输出函数值。
- 一文弄懂python中的函数(自定义函数,匿名函数,高阶函数与解析式)
- [web开发] php优势 - PHP与ASP.NET的比较
- eclipse Mars.2 Release (4.5.2)安装springtool
热门文章
- GDAL开发(一)cs2cs
- ue4 小知识点 als advanced locomotion system v4 foot ik 坑
- 元旦了,送给程序员的祝福礼!!
- RD会话主机服务器2012上没有可用的远程桌面许可证服务器
- InvalidArgumentError: Can not squeeze dim[1], expected a dimension of 1, got 10 for metrics/acc/
- 《C++ Templates》笔记 Chapter 12 Fundamentals in Depth-Chapter 13 Names in Templates
- 安卓应用无响应,你真的了解吗?
- GNU的C++代码书写规范,C语言之父Dennis Ritchie亲自修订 (转)
- 蓝桥杯打卡 报时助手
- cmd、命令大全、DOS命令、使用方法(超全),是我喜欢的文章