微信小程序选项卡功能开发步骤与方法全解析
542
2023-02-21
vue小程序模板开发（vue制作小程序）
本篇文章给大家谈谈vue小程序模板开发，以及vue制作小程序对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
今天给各位分享vue小程序模板开发的知识，其中也会对vue制作小程序进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
2、申请注册微信小程序账号，注意：注册账号之后会有一个AppID，-微信开发者工具，新建项目的时候需要填上，否则很多功能用不了，比如不能预览、不能上传代码等问题。
3、新项目创建完毕就可以进入开发者工具进行编辑，其中最难的就是编写代码这部分，其中app.js、app.json、app.wxss这三个文件功能一定要了解清楚，这对微信小程序开发是非常有帮助的，后面有很多样式、功能之类的，都是需要添加的。
4、善于搜集精美的小组件，比如在github或者微信开放社区上找到想要的组件并巧妙优雅的组装到自己的小程序中，可以大大缩短制作的时间，编辑好点击“提交”，填写小程序相关信息就可以提交审核了，注意：分类最好填写准确，这样才能更快的通过审核。
5、另一种方法则是利用一些一键生成小程序的工具，登录后，进入选择想要的模板进行相应的修改就可以了。
在 uniapp 和 taro 这两个之中进行选择 在参vue小程序模板开发了官方和社区示例后最终选择了 taro 。原因在于 uniapp 目前对于 vue3 vue小程序模板开发的支持尚不完全比如说暂不支持 setup 语法糖对于h5vue小程序模板开发的支持比较差 没有支持 vue3 的 ui 框架等等。
node.js
注意tarojs的版本 建议使用 taro 3.0.24 以上的版本
由于引用 node_modules 的模块vue小程序模板开发，默认不会编译，所以需要额外给 H5 配置 esnextModules ，在 taro 项目的 config/index.js 中新增如下配置项：
如果出现类似 Could not find module View in @tarojs/components 的问题，请在进行如下设置：
详情请参考 https://github.com/dexterBo/mall
目前小程序平台已支持，h5、App 平台暂不支持。
除支持 vue3 语法特性外， uni-app 特有的生命周期钩子支持 Composition API ，如 onLaunch ， onShow ， onLoad …
下面介绍创建支持 vue3 的 uni-app 项目的流程，以及使用中的一些注意事项。vue3 相关问题请关注vue官方文档 vue3 中文文档。
目前仅支持 cli 方式创建支持 vue3 默认模板项目。
如果你之前没有使用过 vue-cli 方式创建过项目，需要先安装 vue-cli ，若已安装则跳过步骤 1。
步骤 1: 全局安装vue-cli
步骤 2: 用如下的命令创建vue3工程
步骤 3: 创建好工程后，进入对应目录
步骤 4: 将项目跑到微信平台
需要将编译后的文件 dist/dev/mp-weixin 导入微信开发者工具运行，也可将项目拖入 HbuildX 中运行，方便运行到各个平台。
欢迎开发者反馈使用该版本遇到的问题，我们将积极收集意见。
后续：
DCloud之所以不支持vue3的h5和app版，主要是因为vue3的组件中很多语法的写法发生变化，这导致uni-app的h5版基础组件库和app版基础组件库的写法与vue3不兼容。
当然除了基础组件，插件市场的所有插件（包括uni ui），都不支持vue3。即便是uni-app已经推出的vue3的小程序版，也不支持插件市场的插件。
考虑到生态兼容的重要性，vue官方（尤雨溪）计划2021年4月中下旬推出新版，对vue2的语法做兼容，届时uni-app的h5版和app版将同时推出，并且插件市场的众多插件也将自动适配vue3版的uni-app。
uni-app不仅支持应用生命周期和页面生命周期，还支持 vue 实例的如下生命周期函数：
注意 ：不要在选项属性或回调上使用箭头函数，比如 created: () = console.log(this.a) 或 vm.$watch('a', newValue = this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你做预期的 Vue 实例，且 this.a 或 this.myMethod 也会是未定义的。
几乎全支持 Vue官方文档：模板语法 ，下面讲下不支持的情况。
(1)不支持纯HTML
uni-app的非H5端里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用，可以使用 rich-text组件 代替。或者使用三方组件wxparse，在hello uni-app中有示例。
(2)不支持部分复杂的 JavaScript 渲染表达式
非H5端无法支持复杂的 JavaScript 表达式。目前可以使用的有 + - * % ?: ! == === < [] .，剩下的还待完善。
(3)不支持过滤器
编译到 App 和小程序平台时不支持使用过滤器，可以使用计算属性（computed）提前计算出数据（如果是数组类型，就提前计算整个数组），用以代替过滤器。
备注 ： 自HBuilderX 1.7.1起，在微信小程序平台支持使用过滤器。
data 必须声明为返回一个初始数据对象的函数；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。
注意 ：在微信小程序端，uni-app 将数据绑定功能委托给Vue，开发者需按Vue 2.0的写法实现数据绑定，不支持微信小程序的数据绑定写法，故如下写法不支持：
需修改为：
支持 Vue官方文档：计算属性 。
实现全局变量的方式需要遵循 Vue 单文件模式的开发规范。详细参考： uni-app全局变量的几种实现方式 。
非H5端不支持在 template 内使用 methods 中的函数。
备注 ： 自HBuilderX 1.7.1起，在微信小程序平台支持支持在 template 内使用 methods 中的函数。
为节约性能，我们将 Class 与 Style 的表达式通过 compiler 硬编码到 uni-app 中。
全支持 Vue官方文档：条件渲染 。
全支持vue列表渲染 Vue官方文档：列表渲染 。只是需要注意一点，嵌套列表渲染，必须指定不同的索引！需要填写 :key="xx" 。
注意 ：同级多个 v-for 时 key 的值是不允许重复的，key 的绑定是不支持表达式的，需要按照以下方式处理。
几乎全支持 Vue官方文档：事件处理器 。事件映射表如下所示：
注意 ：
(1)事件映射表中没有的原生事件也可以使用，例如map组件的regionchange 事件直接在组件上写成 @regionchange,同时这个事件也非常特殊，它的 event type 有 begin 和 end 两个，导致我们无法在handleProxy 中区分到底是什么事件，所以你在监听此类事件的时候同时监听事件名和事件类型既 <map @regionchange="functionName" @end="functionName" @begin="functionName"<map。
(2)为兼容各端，事件需使用 v-on 或 @ 的方式绑定，请勿使用小程序端的bind 和 catch 进行事件绑定。
(3)事件修饰符
(4)若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。
(5)按键修饰符：uni-app运行在手机端，没有键盘事件，所以不支持按键修饰符。
支持 Vue官方文档：表单控件绑定 。建议开发过程中直接使用 uni-app：表单组件 。用法示例：
(1)H5 的select 标签用 picker 组件进行代替
(2)表单元素 radio 用 radio-group 组件进行代替
组件是整个 Vue.js 中最复杂的部分，支持 Vue官方文档：组件 。有且只能使用单文件组件（.vue 组件）的形式进行支持。其他的诸如：动态组件，自定义 render ，和 <script type="text/x-template" 字符串模版等非H5端都不支持。详细的非H5端不支持列表：
(1)暂不支持在组件引用时，在组件上定义 click 等原生事件、v-show（可用 v-if 代替）和 class style 等样式属性(例：<card class="class-name" </card 样式是不会生效的)。
Slot（scoped 暂时还没做支持）
(2)动态组件
(3)异步组件
(4)inline-template
(5)X-Templates
(6)keep-alive
(7)transition
(8)class
(9)style
(10)组件里使用 slot 嵌套的其他组件时不支持 v-for
uni-app提供vue小程序模板开发了丰富的 UI组件 ，比如： picker , map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName" 。如:
uni-app 支持配置全局组件，需在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件。 注意 ：Vue.component 的第一个参数必须是静态的字符串。示例：
(1)main.js 里进行全局注册
(2)index.vue 里可直接使用组件
在 uni-app 中以下这些作为保留关键字，不可作为组件名。
备注 ：除以上列表中的名称外，标准的 HTML 及 SVG 标签名也不能作为组件名。
(1) 如何获取上个页面传递的数据
在 onLoad 里得到，onLoad 的参数是其他页面打开当前页面所传递的数据。
(2) 如何设置全局的数据和全局的方法
uni-app内置了 vuex ，在app里的使用，可参考 hello-uniapp 的 store/index.js 。
(3)如何捕获 app 的 onError
由于 onError 并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在 app 的根组件上添加名为 onError 的回调函数即可。如下：
(4)组件属性设置不生效解决办法
当重复设置某些属性为相同的值时，不会同步到view层。 例如：每次将scroll-view组件的scroll-top属性值设置为0，只有第一次能顺利返回顶部。 这和props的单向数据流特性有关，组件内部scroll-top的实际值改动后，其绑定的属性并不会一同变化。解决办法有两种（以scroll-view组件为例）：
备注 ：第二种解决方式在某些组件可能造成抖动，推荐第一种解决方式。
1. WePY
WePY属腾讯系，是一款组件化的开发框架，比原生小程序的开发模式更接近于MVVM ，它类Vue的开发风格，让Vue开发者很容易上手。
Github地址: https://github.com/Tencent/wepy
官网地址：https://tencent.github.io/wepy
2. mpvue
mpvue 是美团点评开源的一个使用Vue.js开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。
Github：https://github.com/Meituan-Dianping/mpvue
官网：http://mpvue.com/
本文目录一览：
- 1、小程序开发教程 小程序怎么开发
- 2、使用vue3+ typeScript 开发小程序
- 3、uni-app 项目小程序端支持 vue3 介绍
- 4、uni-app使用Vue.js
- 5、推荐两个微信小程序开发框架
- 6、开发小程序流程
小程序开发教程 小程序怎么开发
1、有两种方法，一种方法是自己开发，这需要有一定的基础，微信小程序虽是腾讯出品，但是核心的思想跟vue等框架是一样的。2、申请注册微信小程序账号，注意：注册账号之后会有一个AppID，-微信开发者工具，新建项目的时候需要填上，否则很多功能用不了，比如不能预览、不能上传代码等问题。
3、新项目创建完毕就可以进入开发者工具进行编辑，其中最难的就是编写代码这部分，其中app.js、app.json、app.wxss这三个文件功能一定要了解清楚，这对微信小程序开发是非常有帮助的，后面有很多样式、功能之类的，都是需要添加的。
4、善于搜集精美的小组件，比如在github或者微信开放社区上找到想要的组件并巧妙优雅的组装到自己的小程序中，可以大大缩短制作的时间，编辑好点击“提交”，填写小程序相关信息就可以提交审核了，注意：分类最好填写准确，这样才能更快的通过审核。
5、另一种方法则是利用一些一键生成小程序的工具，登录后，进入选择想要的模板进行相应的修改就可以了。
使用vue3+ typeScript 开发小程序
要求是使用 vue3 + typescript 进行开发小程序和H5vue小程序模板开发的跨端应用在 uniapp 和 taro 这两个之中进行选择 在参vue小程序模板开发了官方和社区示例后最终选择了 taro 。原因在于 uniapp 目前对于 vue3 vue小程序模板开发的支持尚不完全比如说暂不支持 setup 语法糖对于h5vue小程序模板开发的支持比较差 没有支持 vue3 的 ui 框架等等。
node.js
注意tarojs的版本 建议使用 taro 3.0.24 以上的版本
由于引用 node_modules 的模块vue小程序模板开发，默认不会编译，所以需要额外给 H5 配置 esnextModules ，在 taro 项目的 config/index.js 中新增如下配置项：
如果出现类似 Could not find module View in @tarojs/components 的问题，请在进行如下设置：
详情请参考 https://github.com/dexterBo/mall
uni-app 项目小程序端支持 vue3 介绍
随着 vue3 的发布， uni-app 也逐步支持 vue3 。目前小程序平台已支持，h5、App 平台暂不支持。
除支持 vue3 语法特性外， uni-app 特有的生命周期钩子支持 Composition API ，如 onLaunch ， onShow ， onLoad …
下面介绍创建支持 vue3 的 uni-app 项目的流程，以及使用中的一些注意事项。vue3 相关问题请关注vue官方文档 vue3 中文文档。
目前仅支持 cli 方式创建支持 vue3 默认模板项目。
如果你之前没有使用过 vue-cli 方式创建过项目，需要先安装 vue-cli ，若已安装则跳过步骤 1。
步骤 1: 全局安装vue-cli
步骤 2: 用如下的命令创建vue3工程
步骤 3: 创建好工程后，进入对应目录
步骤 4: 将项目跑到微信平台
需要将编译后的文件 dist/dev/mp-weixin 导入微信开发者工具运行，也可将项目拖入 HbuildX 中运行，方便运行到各个平台。
欢迎开发者反馈使用该版本遇到的问题，我们将积极收集意见。
后续：
DCloud之所以不支持vue3的h5和app版，主要是因为vue3的组件中很多语法的写法发生变化，这导致uni-app的h5版基础组件库和app版基础组件库的写法与vue3不兼容。
当然除了基础组件，插件市场的所有插件（包括uni ui），都不支持vue3。即便是uni-app已经推出的vue3的小程序版，也不支持插件市场的插件。
考虑到生态兼容的重要性，vue官方（尤雨溪）计划2021年4月中下旬推出新版，对vue2的语法做兼容，届时uni-app的h5版和app版将同时推出，并且插件市场的众多插件也将自动适配vue3版的uni-app。
uni-app使用Vue.js
说明 ：uni-app基于 Vue 2.0 实现vue小程序模板开发，开发者需注意Vue 1.0 - 2.0 vue小程序模板开发的使用差异，详见 从 Vue 1.x 迁移 。uni-app不仅支持应用生命周期和页面生命周期，还支持 vue 实例的如下生命周期函数：
注意 ：不要在选项属性或回调上使用箭头函数，比如 created: () = console.log(this.a) 或 vm.$watch('a', newValue = this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你做预期的 Vue 实例，且 this.a 或 this.myMethod 也会是未定义的。
几乎全支持 Vue官方文档：模板语法 ，下面讲下不支持的情况。
(1)不支持纯HTML
uni-app的非H5端里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用，可以使用 rich-text组件 代替。或者使用三方组件wxparse，在hello uni-app中有示例。
(2)不支持部分复杂的 JavaScript 渲染表达式
非H5端无法支持复杂的 JavaScript 表达式。目前可以使用的有 + - * % ?: ! == === < [] .，剩下的还待完善。
(3)不支持过滤器
编译到 App 和小程序平台时不支持使用过滤器，可以使用计算属性（computed）提前计算出数据（如果是数组类型，就提前计算整个数组），用以代替过滤器。
备注 ： 自HBuilderX 1.7.1起，在微信小程序平台支持使用过滤器。
data 必须声明为返回一个初始数据对象的函数；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。
注意 ：在微信小程序端，uni-app 将数据绑定功能委托给Vue，开发者需按Vue 2.0的写法实现数据绑定，不支持微信小程序的数据绑定写法，故如下写法不支持：
需修改为：
支持 Vue官方文档：计算属性 。
实现全局变量的方式需要遵循 Vue 单文件模式的开发规范。详细参考： uni-app全局变量的几种实现方式 。
非H5端不支持在 template 内使用 methods 中的函数。
备注 ： 自HBuilderX 1.7.1起，在微信小程序平台支持支持在 template 内使用 methods 中的函数。
为节约性能，我们将 Class 与 Style 的表达式通过 compiler 硬编码到 uni-app 中。
全支持 Vue官方文档：条件渲染 。
全支持vue列表渲染 Vue官方文档：列表渲染 。只是需要注意一点，嵌套列表渲染，必须指定不同的索引！需要填写 :key="xx" 。
注意 ：同级多个 v-for 时 key 的值是不允许重复的，key 的绑定是不支持表达式的，需要按照以下方式处理。
几乎全支持 Vue官方文档：事件处理器 。事件映射表如下所示：
注意 ：
(1)事件映射表中没有的原生事件也可以使用，例如map组件的regionchange 事件直接在组件上写成 @regionchange,同时这个事件也非常特殊，它的 event type 有 begin 和 end 两个，导致我们无法在handleProxy 中区分到底是什么事件，所以你在监听此类事件的时候同时监听事件名和事件类型既 <map @regionchange="functionName" @end="functionName" @begin="functionName"<map。
(2)为兼容各端，事件需使用 v-on 或 @ 的方式绑定，请勿使用小程序端的bind 和 catch 进行事件绑定。
(3)事件修饰符
(4)若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。
(5)按键修饰符：uni-app运行在手机端，没有键盘事件，所以不支持按键修饰符。
支持 Vue官方文档：表单控件绑定 。建议开发过程中直接使用 uni-app：表单组件 。用法示例：
(1)H5 的select 标签用 picker 组件进行代替
(2)表单元素 radio 用 radio-group 组件进行代替
组件是整个 Vue.js 中最复杂的部分，支持 Vue官方文档：组件 。有且只能使用单文件组件（.vue 组件）的形式进行支持。其他的诸如：动态组件，自定义 render ，和 <script type="text/x-template" 字符串模版等非H5端都不支持。详细的非H5端不支持列表：
(1)暂不支持在组件引用时，在组件上定义 click 等原生事件、v-show（可用 v-if 代替）和 class style 等样式属性(例：<card class="class-name" </card 样式是不会生效的)。
Slot（scoped 暂时还没做支持）
(2)动态组件
(3)异步组件
(4)inline-template
(5)X-Templates
(6)keep-alive
(7)transition
(8)class
(9)style
(10)组件里使用 slot 嵌套的其他组件时不支持 v-for
uni-app提供vue小程序模板开发了丰富的 UI组件 ，比如： picker , map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName" 。如:
uni-app 支持配置全局组件，需在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件。 注意 ：Vue.component 的第一个参数必须是静态的字符串。示例：
(1)main.js 里进行全局注册
(2)index.vue 里可直接使用组件
在 uni-app 中以下这些作为保留关键字，不可作为组件名。
备注 ：除以上列表中的名称外，标准的 HTML 及 SVG 标签名也不能作为组件名。
(1) 如何获取上个页面传递的数据
在 onLoad 里得到，onLoad 的参数是其他页面打开当前页面所传递的数据。
(2) 如何设置全局的数据和全局的方法
uni-app内置了 vuex ，在app里的使用，可参考 hello-uniapp 的 store/index.js 。
(3)如何捕获 app 的 onError
由于 onError 并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在 app 的根组件上添加名为 onError 的回调函数即可。如下：
(4)组件属性设置不生效解决办法
当重复设置某些属性为相同的值时，不会同步到view层。 例如：每次将scroll-view组件的scroll-top属性值设置为0，只有第一次能顺利返回顶部。 这和props的单向数据流特性有关，组件内部scroll-top的实际值改动后，其绑定的属性并不会一同变化。解决办法有两种（以scroll-view组件为例）：
备注 ：第二种解决方式在某些组件可能造成抖动，推荐第一种解决方式。
推荐两个微信小程序开发框架
下面是最近了解的，开发者使用较多的框架：1. WePY
WePY属腾讯系，是一款组件化的开发框架，比原生小程序的开发模式更接近于MVVM ，它类Vue的开发风格，让Vue开发者很容易上手。
Github地址: https://github.com/Tencent/wepy
官网地址：https://tencent.github.io/wepy
2. mpvue
mpvue 是美团点评开源的一个使用Vue.js开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。
Github：https://github.com/Meituan-Dianping/mpvue
官网：http://mpvue.com/
开发小程序流程
开发小程序流程：
1、小程序账号注册
小程序需要在微信公众平台注册账号，来管理和发布小程序。账号是邮箱类型，需要公众号认证才能审核通过。
2、前期规划小程序功能
小程序前期要确定功能及类型，需要用到原型图，画出小程序的基本框架及功能。
3、小程序UI设计
根据前期的策划原型图，需要设计出小程序的页面。小程序的设计主要考虑用户体验度，突出重点，流程明确，导航来去自如，加载页面等等。
4、小程序前后端开发
小程序前端代码有小程序源生代码、html5、vue等代码可以编写，有条件建议用源生的代码，运行更快吧。小程序后端代码有php、jsp、asp-、php是应用最广泛的，性价比也最高。同样的功能开发，用php开发的成本最低。前后端开发完成之后，需要写下数据交互，这样小程序和后台的数据就连接起来了。
5、小程序开发测试和线上提交
小程序要对开发出来的功能进行测试，找到bug及时修复。测试代码运行速度，优化代码结构,，测试各个手机端兼容性，能承载多少网络带宽压力。
当小程序开发完毕之后，就要用到小程序账号来配置小程序的名称、图片等信息。然后提交代码给公众号平台审核，审核通过之后，在后台点发布，你的小程序就正式上线。
关于vue小程序模板开发和vue制作小程序的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 vue小程序模板开发的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue制作小程序、vue小程序模板开发的信息别忘了在本站进行查找喔。版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~