微信小程序

前端 > uni-app uni-app

发布时间 : 2024-12-20 20:23

阅读 :

微信小程序开发

微信小程序开发

注意事项

主包大小管理
- 主包需 ≤ 2MB，通过分包加载非首页内容
- 静态资源上传 CDN
条件编译
- #ifdef：if defined 仅在某平台存在
- #ifndef：if not defined 除了某平台均存在
- %PLATFORM%：平台名称

一、初始准备

1.1 相关软件下载

hbuilder下载：brew install --cask hbuilderx
微信开发工具下载：(macOS ARM64)[https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html]

1.2 uniapp开发微信小程序流程

流程
- 项目创建：新建 UniApp 项目 → 选默认模板
- 配置微信 AppID：修改 manifest.json → mp-weixin.appid（填微信公众平台的 AppID）
- 调试与发布：点HBuilderX 运行 → 微信开发者工具 → 真机扫码测试 → 发行菜单打包上传
appid区分
- 基础配置中AppID：打包app/h5，unicloud云服务， uni-AD 广告会用到（微信小程序不需要）
- mp-weixin（app-id）：微信公众平台分配，微信平台身份认证、API调用

1.3 主体结构分析

文件结构
- App.vue：入口文件
- main.js：应用入口
- manifest.json：应用配置中枢
- page.json：路由与页面配置
- uni.scss：全局scss变量库（纯SCSS变量定义不影响主包体积，但写入具体样式会导致主包显著膨胀）
- uni.promisify.adaptor：为了处理某些 API 或框架返回 [error, result] 数组的格式，将其转换为标准的 Promise 风格

1.4 引入uViewui

插件市场下载地址：uView
点击下载插件并导入HBuilderX - 直接导入uView到uni_modules文件中
引入

// main.js
import uView from "@/uni_modules/uview-ui";
Vue.use(uView)
uni.$u.setConfig({
  config: {
		// 修改默认单位为rpx，相当于执行 uni.$u.config.unit = 'rpx'
		unit: 'rpx'
	},
  props: {
		// 修改radio组件的size参数的默认值，相当于执行 uni.$u.props.radio.size = 30
		radio: {
			size: 15 
		}
	}
})
// uni.scss - 引入uView样式(颜色等全局样式变量)
@import '@/uni_modules/uview-ui/theme.scss';
// app.vue - 引入index.scss(如文本居中、浮动等工具样式)

二、功能开发

2.1 tabbar实现

注意：
- tabBar最少2个，最多5个，tab 按数组的顺序排序
- tabbar切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花
- tabbar的页面展现过一次后就保留在内存中，再次切换tabbar页面，只会触发每个页面的onShow，不会再触发onLoad
- 字体图标库，微信小程序不支持
图标下载：(iconfont)[https://www.iconfont.cn/search/index]
- 下载后引入iconfont.ttf文件，iconfont.css文件
- 修改iconfont.css文件
  @font-face {
  font-family: “iconfont”;
  src: url(‘~@/static/fonts/iconfont.ttf’);
  }
- 在app.vue引入iconfont.css文件
  @import url("@/static/fonts/iconfont.css");
  （5）使用方式