uniapp开发微信小程序_uniapp 微信小程序开发

---

一、开发工具

1.安装HbuilderX
2.创建项目
3.安装对应vue的编译器
4.安装微信开发者工具

二、基础文件

1.uniapp使用view标签
2.pages.json配置页面路由导航栏、tabBar等页面信息
3.static f存放静态资源文件

三、uniapp和原生微信开发的区别

1.每个页面都为一个.vue 文件
2.属性绑定 :src=“url” 原生：src=“{{url}}”
3.事件绑定 @tag=“eventName” 原生：bindtap=“eventName”
4.支持vue指令： v-for、v-if、v-show、v-model 等
5.uni.setStorage 原生:使用wx.setStorage、wx.getStorage

四、命令行创建项目

npx degit dcloudio/uni-preset-vue#vite-tes projectName
1

五、安装插件

1.uniapp插件

	uni-create-view
	uni-helper
	uniapp小程序扩展（开发工具中安装）
1
2
3

2.安装ts类型校验插件

npm i -D @types/wechat-miniprogram @uni-helper/uniapp-types
1

配置tsconfig.json 文件

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
      "@dcloudio/types",
      "miniprogram-api-typings",
      "@uni-helper/uni-app-types",
      "@uni-helper/uni-ui-types"
    ]
  },
   // 校验 uni-app 组件类型
   "vueCompilerOptions": {
    // experimentalRuntimeMode 已废弃，现调整为 nativeTags，请升级 Volar 插件至最新版本
    "nativeTags": ["block", "component", "template", "slot"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

开发工具json文件注释报错问题
我们把 pages.json 和 manifest.json 这两个文件指定使用 jsonc 的语法即可，然后就以写注释了。

 // 配置语言的文件关联
  "files.associations": {
    "pages.json": "jsonc", // pages.json 可以写注释
    "manifest.json": "jsonc" // manifest.json 可以写注释
  }
1
2
3
4
5

六、安装uni-ui

npm install @dcloudio/uni-ui
1

pages.json 中配置easycom

// 组件自动引入规则
	"easycom": {
		// 是否开启自动扫描
		"autoscan": true,
		// 以正则方式自定义组件匹配规则
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
			// 以 Xtx 开头的组件，在 components 文件夹中查找引入（需要重启服务器）
			"^Xxx(.*)": "@/components/Xxx$1.vue"
		}
	},
1
2
3
4
5
6
7
8
9
10
11
12

npm i -D @uni-helper/uni-ui-types
1

配置tsconfig.json 中compilerOptions

"@uni-helper/uni-ui-types"
1

七、自定义封装组件

pages.json配置easycom “custom”

// 以 Xxx 开头的组件，在 components 文件夹中查找引入（需要重启服务器）
			"^Xxx(.*)": "@/components/Xxx$1.vue"
1
2

配置类型声明，创建components.d.ts(统一放到types文件夹下)

import XxxName from '@/components/XxxName.vue'

declare module 'vue' {
  export interface GlobalComponents {
    XxxName: typeof XxxName
  }
}

// 组件实例类型
export type XxxName = InstanceType<typeof XxxName>
1
2
3
4
5
6
7
8
9
10

八、子组件接收数据

export type listItem = {
  name: string
  id: string
}
defineProps<{list: listItem[]}>
//组件中直接使用list
1
2
3
4
5
6

八、页面骨架屏生成

微信开发工具>页面信息生成骨架屏>转成vue组件>显示骨架屏

九、动态设置title

uni.setNavigationBarTittle({title: titleValue})
1

十、设置分包和预下载

小程序分包：将小程序的代码分别打包成多个小程序包，减小小程序的加载时间，提高用户体验
分包预下载：在进入小程序某个页面时，由框架自动预下载可能需要的分包
1
2

分包配置 pages.json文件

"subPackages": [
		{
			"root": "fenBao",//分包根路径
			"pages": [
				{
					"path": "settings/settings", //分包页面文件路径
					"style": {
						"navigationBarTitleText": "分包页面"
					}
				},
			]
		},
		
	],
1
2
3
4
5
6
7
8
9
10
11
12
13
14

预下载配置pages.json文件

// 分包预下载配置
//在这个进入pages/my/my这个页面时加载分包页面
	"preloadRule": {
		"pages/my/my": {
			"network": "all",
			"packages": [
				"fenBao"
			]
		}
	}
1
2
3
4
5
6
7
8
9
10

十一、项目打包发布

npm run build:mp-weixin
1

生成的文件导入到微信开发者工具>上传代码>（官网）提交审核>正式发布