uniapp-微信小程序篇

uniapp-微信小程序篇

一、创建项目(以Vue3+TS 项目为示例)

可以通过命令行的方式创建也可以通过HBuilderX进行创建(通过HBuilderX创建的项目建议选择最简单的模板),个人建议使用命令行方式。

(1) 命令行方式:

javascript 复制代码
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

如下载失败:可以直接去gitee官网下载

javascript 复制代码
https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip

(2) HBuilderX 创建

通过HBuilderX没有默认的Vue3+Ts模板 所以我建议还是使用命令行的方式。

二、配置manifest.json

找到manifest.json文件中的mp-weixin项进行微信小程序基础配置

javascript 复制代码
"mp-weixin" : {
        "appid" : "xxxx", // 你的微信小程序appId
        "setting" : {
            "urlCheck" : false,
            "minified" : true,
            "postcss" : true // 支持postcss预处理
        },
        "usingComponents" : true, // 使用组件化
        "optimization" : { // 进行分包
            "subPackages" : true
        },
        "lazyCodeLoading" : "requiredComponents",// 按需加载
        "permission" : { // 需要申请获取的权限
            "scope.userLocation" : {
                "desc" : "获取用户定位"
            }
        }
},

三、配置微信开发者工具

我们使用HBuilderX 开发中需要调试、此时因为微信小程序的工具功能都没有、所以我们可以通过HBuilderX连接微信开发者工具进行页面调试。

找到设置下面的代理设置- 设置为使用系统代理

准备好这些就可以开始开发了。

四、分包

当我们项目很大的时候微信小程序会有打包大小限制、所以就需要进行分包处理。

下面我做了一个basePackages分包、pages 是主包(默认)。我们可以根据自己业务需求进行功能代码差分、可以分出不同的包、这里只是为了做演示。

下面是目录结构:

对应的pages.json内容为:

javascript 复制代码
{
	"pages": [{
			"path": "pages/login/index",
			"style": {
				"navigationBarTitleText": "登录"
			}
		},
		{
			"path": "pages/order/index",
			"style": {
				"navigationBarTitleText": "订单",
				"enablePullDownRefresh": true // 支持下拉刷新
			}
		},
	],
	"subPackages": [{
		"root": "basePackages", // 此处是分包目录名称
		"pages": [ // 此数组内配置的页面根目录所有都默认为basePackages
			{
				"path": "order/modifyInfo/index", // 目录:basePackages/order/modifyInfo/index
				"style": {
					"navigationBarTitleText": "修改信息"
				}
			},
		]
	}],
}

五、注意事项

(1). 微信小程序的taBar 图标不支持字体图标、必须使用图片(否则无效)。

首次开发因为uniapp是支持的、所以使用了字体图标,一直出不来

javascript 复制代码
"tabBar": {
		"borderStyle": "white", //边框颜色
		"backgroundColor": "#fff", //背景颜色
		"color": "#000000", //默认颜色
		"selectedColor": "#1B5BFF", //选中的颜色
		"fontSize": "14px", // 字体大小
		"list": [{
				"iconPath": "static/orderMenu.png",
				"selectedIconPath": "static/orderMenuActive.png",
				"text": "订单",
				"pagePath": "pages/order/index"
			},
			{
				"iconPath": "static/checkPrice.png",
				"selectedIconPath": "static/checkPriceActive.png",
				"text": "查货",
				"pagePath": "pages/checkPrice/index"
			},
		]
}

六、发版

这里注意一个问题、就是开发完成需要发版的时候、一定要在微信公众平台进行服务器域名配置、否则将无法与你的后端服务进行通信。


在此处将你们的后端服务地址配置上(注意还必须是https),没有配置https的可以自行去你们的服务器(阿里云、腾讯云)申请就好了。

相关推荐
用户904706683572 小时前
uniapp Vue3版本,用pinia存储持久化插件pinia-plugin-persistedstate对微信小程序的配置
前端·uni-app
郑叔敲代码3 小时前
帝国cms 微信小程序的登录逻辑
微信小程序·小程序·notepad++
细节控菜鸡3 小时前
【2025最新】uniapp 中基于 request 封装实现多文件上传完整指南
uni-app
fakaifa3 小时前
【全开源】企业微信SCRM社群营销高级版系统+uniapp前端
uni-app·开源·企业微信·scrm·源码下载·企业微信scrm
棋子一名6 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
无衣 秦风7 小时前
vue3+hubuilderX开发微信小程序使用elliptic生成ECDH密钥对遇到的问题
微信小程序·小程序
游戏开发爱好者87 小时前
BShare HTTPS 集成与排查实战,从 SDK 接入到 iOS 真机调试(bshare https、签名、回调、抓包)
android·ios·小程序·https·uni-app·iphone·webview
2501_916008898 小时前
iOS 26 系统流畅度实战指南|流畅体验检测|滑动顺畅对比
android·macos·ios·小程序·uni-app·cocoa·iphone
流***陌8 小时前
陪诊就医小程序中健康档案的精细化管理设计方案
小程序
明天你好2678 小时前
如何做一个花店小程序,搭建一个小程序多少钱
微信小程序·小程序·模拟退火算法