vue可以开发小程序(vue开发小程序自定义属性失效)

网友投稿 441 2023-02-26

本篇文章给大家谈谈vue可以开发小程序,以及vue开发小程序自定义属性失效对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 今天给各位分享vue可以开发小程序的知识,其中也会对vue开发小程序自定义属性失效进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

本文目录一览:

推荐两个微信小程序开发框架

下面是最近了解的,开发者使用较多的框架:

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/

使用vue3+ typeScript 开发小程序

要求是使用 vue3 + typescript 进行开发小程序和H5vue可以开发小程序的跨端应用

在 uniapp 和 taro 这两个之中进行选择 在参了官方和社区示例后最终选择了 taro 。原因在于 uniapp 目前对于 vue3 的支持尚不完全比如说暂不支持 setup 语法糖对于h5的支持比较差 没有支持 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

浅谈原生小程序

有句话说vue可以开发小程序,会使用 vue 开发的程序员就会开发小程序,确实是这样,在我学习 vue 后,再去学习小程序时,感觉很好上手,因为很多语法都是类似的写法。当然,也有很多不一样的。

1.声明 data :用过 vue 的朋友都知道, vue 中声明 data 时, data 必须是函数,不然会报错,原生的小程序就不是这样,直接 data: { } 就okvue可以开发小程序了。
2.绑定数据:绑定动态属性时需要在属性的双引号里使用 {{ }}
3.列表循环:使用 wx:for ,在循环题内有隐藏的item代表当前项, index 代表下标

4.事件 事件处理函数在page里定义,和onLoad / data等同级

事件的写法:以 bind 或 catch 开头,然后跟上事件的类型,如 bindtap、catchtouchstart
bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
事件的传参:事件传参不能事件处理通过 () 来传递参数,在组件里面通过自定义属性 data-xx="参数名称" 来定义,在事件处理函数里通过 event.currentTarget.dataset 来获取参数
事件官方文档
5.修改data里面的数据
在vue中,修改data里面的数据,直接【 this.属性 】就可以修改了,可是小程序不一样,它需要通过【 this.setData({ data: newData }) 】来修改,访问data的中的数据用【 this.data.xx 】来访问;一开始学习小程序的时候,习惯了[vue](https://cn.vuejs.org/)的写法,总是写成 vue 的法,贼难受。

6.自定义组件

更多关注 小程序官方文档

开发小程序流程

开发小程序流程:

1、小程序账号注册

小程序需要在微信公众平台注册账号,来管理和发布小程序。账号是邮箱类型,需要公众号认证才能审核通过。

2、前期规划小程序功能

小程序前期要确定功能及类型,需要用到原型图,画出小程序的基本框架及功能。

3、小程序UI设计

根据前期的策划原型图,需要设计出小程序的页面。小程序的设计主要考虑用户体验度,突出重点,流程明确,导航来去自如,加载页面等等。

4、小程序前后端开发

小程序前端代码有小程序源生代码、html5、vue等代码可以编写,有条件建议用源生的代码,运行更快吧。小程序后端代码有php、jsp、asp-、php是应用最广泛的,性价比也最高。同样的功能开发,用php开发的成本最低。前后端开发完成之后,需要写下数据交互,这样小程序和后台的数据就连接起来了。

5、小程序开发测试和线上提交

小程序要对开发出来的功能进行测试,找到bug及时修复。测试代码运行速度,优化代码结构,,测试各个手机端兼容性,能承载多少网络带宽压力。

当小程序开发完毕之后,就要用到小程序账号来配置小程序的名称、图片等信息。然后提交代码给公众号平台审核,审核通过之后,在后台点发布,你的小程序就正式上线。

微信小程序组件化开发

微信小程序的组件和Vue的组件非常相似。

在微信小程序中有很多内置组件,比如button view input image等,有时候我们要自定义组件。和Vue的组件似的。

如何创建自定义组件:
新建一个components目录,在里边创建自定义组件

组件的组成:

使用组件:

一个简单的示例:
创建comp,代表页面;创建components/xxxx,代表组件。

创建组件:

使用组件:

注意:json文件中不能写注释啥的。这里的注释是为了解释清楚,在开发中不能写注释。

组件的注意事项:

组件的样式细节:

如何控制页面和组件的样式相互影响:

组件和页面相互通信

this.triggerEvent(事件名,参数对象,{}),最后是options,额外的一些选项

预留一个设备,以有利于对以后进行扩展。
好处:

例子:
在移动端,导航栏,nav-bar,分为左中右三部分。不把这三部分的内容写死。就用插槽,为了封装性更好。

单个插槽的使用很简单:

多个插槽的使用稍微复杂,要设置几个东西:

component构造器中可以写哪些东西,如下

关于vue可以开发小程序和vue开发小程序自定义属性失效的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。 vue可以开发小程序的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于vue开发小程序自定义属性失效、vue可以开发小程序的信息别忘了在本站进行查找喔。

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Mybatis批量插入返回成功的数目实例
下一篇:Eclipse中配置Maven的图文教程
相关文章

 发表评论

暂时没有评论,来抢沙发吧~