文章目录
一、开发工具
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.uniapp插件
uni-create-view
uni-helper
uniapp小程序扩展(开发工具中安装)
2.安装ts类型校验插件
npm i -D @types/wechat-miniprogram @uni-helper/uniapp-types
配置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"]
}
开发工具json文件注释报错问题
我们把 pages.json 和 manifest.json 这两个文件指定使用 jsonc 的语法即可,然后就以写注释了。
// 配置语言的文件关联
"files.associations": {
"pages.json": "jsonc", // pages.json 可以写注释
"manifest.json": "jsonc" // manifest.json 可以写注释
}
六、安装uni-ui
npm install @dcloudio/uni-ui
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"
}
},
npm i -D @uni-helper/uni-ui-types
配置tsconfig.json 中compilerOptions
"@uni-helper/uni-ui-types"
七、自定义封装组件
pages.json配置easycom “custom”
// 以 Xxx 开头的组件,在 components 文件夹中查找引入(需要重启服务器)
"^Xxx(.*)": "@/components/Xxx$1.vue"
配置类型声明,创建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>
八、子组件接收数据
export type listItem = {
name: string
id: string
}
defineProps<{list: listItem[]}>
//组件中直接使用list
八、页面骨架屏生成
微信开发工具>页面信息生成骨架屏>转成vue组件>显示骨架屏
九、动态设置title
uni.setNavigationBarTittle({title: titleValue})
十、设置分包和预下载
小程序分包:将小程序的代码分别打包成多个小程序包,减小小程序的加载时间,提高用户体验
分包预下载:在进入小程序某个页面时,由框架自动预下载可能需要的分包
分包配置 pages.json文件
"subPackages": [
{
"root": "fenBao",//分包根路径
"pages": [
{
"path": "settings/settings", //分包页面文件路径
"style": {
"navigationBarTitleText": "分包页面"
}
},
]
},
],
预下载配置pages.json文件
// 分包预下载配置
//在这个进入pages/my/my这个页面时加载分包页面
"preloadRule": {
"pages/my/my": {
"network": "all",
"packages": [
"fenBao"
]
}
}
十一、项目打包发布
npm run build:mp-weixin
生成的文件导入到微信开发者工具>上传代码>(官网)提交审核>正式发布