当前位置:   article > 正文

uniapp开发微信小程序_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

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/705597
推荐阅读
相关标签
  

闽ICP备14008679号