| uniapp中vif和vfor为什么可以一起使用 uniapp和vant区别 | 您所在的位置：网站首页 › vfor和vif的区别 › uniapp中vif和vfor为什么可以一起使用 uniapp和vant区别 |
uniapp中vif和vfor为什么可以一起使用 uniapp和vant区别
|
简介 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。 特点学习成本低，如果学习过vue.js和微信小程序就可以直接上手写项目。项目目录结构，与微信小程序一样，配置文件以及配置文件内容都一样。语法，uni-app的语法可以理解为是vue和微信小程序的结合体，在模板上使用vue的写法，在js当中是使用的微信小程序的写法。数据的绑定也是使用vue的写法。注意：接口数据请求的数据存储是vue和微信小程序二者的结合，接口请求使用小程序的结构，数据的保存使用vue的写法，如下图进行对比 首先是vue的，数据的储存是使用双向数据绑定的：
然后是微信小程序的数据储存：小程序是在数据请求过来的时候，得先在setdata中进行储存，然后再把储存的值写到data中，setdata相当于一个中转站。请求过来的数据必须先在setdata中进行储存。
最后是uni-app数据请求的数据储存：
学过微信小程序的同学，在学习uni-app一定要注意，我是刚学完小程序之后立即学的un-app，所以刚开始的时候有点倒不过来。 使用项目创建HBuilderX 直接创建，HBuilderX为uni-app做了特别强化。vue-cli命令行创建，具体操作可以参考官网教程uni-app官网 运行在手机上运行时，手机会先进行检查，然后会自动下载Hbuilder手机运行软件，然后项目就可以在手机上打开了。运行到微信开发者工具上，注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。 若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果。组件引用拿下载vant组件做案例，在官网的插件市场进行组件下载，下载好之后，并解压项目引入组件，因为vant-weapp是微信小程序的，所以在项目根目录新建 wxcomponets 文件夹用来存放小程序组件，这一点在uni-app官方的目录结构就有说明把git 下载 vant-weapp 最新源代码，并将dist目录拷贝到新建的wxcomponents目录下 page.json配置{ "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "vant-weapp", // 使用小程序组件 "usingComponents": { "van-button": "/wxcomponents/vant-weapp/button/index" } } } ] }最后就可以使用vant weapp组件了。大家参考 vant Weapp 组件库使用的，这样可以提高工作效率。
|
【本文地址】
公司简介
联系我们