技术栈
Vue3 uniapp
第一步:注册微信公众平台
网址:mp.weixin.qq.com/补充小程序信息
第二步: 使用uniapp创建项目
网址:uniapp.dcloud.net.cn/univerify,来到快速上手,找到创建Vue项目的命令,创建一个桌面文件夹,拖入Cursor,在Cursor中打开终端,输入创建Vue项目的命令:npx degit dcloudio/uni-preset-vue#vite my-vue3-project\
这里推荐一个vscode/cursor扩展插件:tree-generator,用于生成目录结构
使用Vue创建的小程序目录:
my-vue3-project
├─ src
│ ├─ pages
│ │ └─ index
│ │ └─ index.vue
│ ├─ static
│ │ └─ logo.png
│ ├─ App.vue
│ ├─ main.js
│ ├─ manifest.json
│ ├─ pages.json //相当于Vue中的router路由
│ ├─ shime-uni.d.ts
│ └─ uni.scss
├─ index.html
├─ package.json //各种依赖,以及运行打包命令
├─ shims-uni.d.ts
└─ vite.config.js
开发微信小程序,那么在package.json中运行dev:h5
第三步:使用Cursor辅助开发
通过内置AI,描述需求,完成开发过程自行了解,以上页面为小程序路由配置页面,通过以上格式完成小程序多个页面跳转,均可通过AI完成
第四步:打包并上传
通过package.json中对应的打包命令将代码打包成对应的格式,打包成微信小程序使用build:mp-weixin命令,然后会自动打包成dist文件夹
再下载微信开发者程序app,创建项目目录选择dist\build\mp-weixin,就可以进行预览调试
注:当在Cursor中修改代码之后,重新打包之后,微信开发者工具自动更新貌似有些问题,建议在微信开发者工具关闭项目重新打开 预览调试无误之后可以点击上传
上传之后打开微信公众平台网站,在版本管理下进行提交审核,也可以在提交审核右方下拉中点击体验,邀请好友进行测试,好友提交申请之后微信会收到消息,同意之后可以在微信公众平台下的成员管理进行操作
图标库集成
如果使用iconfont的话,集成步骤与集成到Vue项目基本一致,通过iconfont创建项目,然后将图标添加至购物车,然后添加到项目,按如下步骤将生成的css网址导入到main.js中
注:通过该网络地址导入时,需要在前方加https: 微信小程序request必须走https
上方图片中是通过本地导入,也就是将fontclass代码下载到本地,然后将下载的压缩包中的css文件存储在项目src/static/iconfont下,然后在main.js中通过上图方式导入
本篇笔记用于个人学习记录使用,流程偏多,如有不足,欢迎指正
