网站背景音乐,聊城做网站的公司案例,chinacd.wordpress,淮安网站建设推广近年来#xff0c;随着技术的发展#xff0c;人们越来越意识到跨平台和统一的重要性。对于同一款应用来说#xff0c;一般都会有移动端、PC端、甚至小程序端。这是由于设备的不同#xff0c;我们必须要做很多的客户端来满足不同的用户需求。但是由于硬件设施的不同#xf…近年来随着技术的发展人们越来越意识到跨平台和统一的重要性。对于同一款应用来说一般都会有移动端、PC端、甚至小程序端。这是由于设备的不同我们必须要做很多的客户端来满足不同的用户需求。但是由于硬件设施的不同我们往往对于同一款应用的两个不同端要编写两次代码而这些代码中有很多都是可以复用的那么有没有一张可能我们只编写一次代码就能满足不同的设施需求呢。现在介绍一款由国人DCloud公司开发的前端框架uniapp完美的解决了这个问题。
uni-app 是一个使用 vue 开发所有前端应用的框架开发者编写一套代码可发布到iOS、Android、Web响应式、以及各种小程序微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝、快应用等多个平台。
uniapp的官网地址uni-app官网 (dcloud.net.cn)
DCloud退出了一款应用专门用来编译uniapp本质还是Vue项目HBuilderX。
这款工具是完全开源免费的并且免安装我们只需要解压之后就可以正常的使用。DCloud公司承诺将一直开源下去。
HBuilderX的下载地址在uniapp的官网中就可以找到
HBuilderX的下载地址简介 - HBuilderX 文档 (dcloud.net.cn)
值得一提的是DCloud有一个插件市场我们可以在这里可以找到各种插件来快速提升我们的开发效率(需要特别说明的是大部分插件是免费的有些插件可以需要我们进行付费使用)DCloud 插件市场
接下来我们言归正传。来使用HBuilderX来新建一个项目并导入uview-plus的框架。
在这里简单介绍一下uview-plus框架。uview-plus是全面兼容nvue的uni-app生态框架全面的组件和便捷的工具会让您信手拈来如鱼得水基于uView2.0初步修改后续会陆续修复vue3兼容性以及组合式API改造等。(就是一个样式框架有了它我们可以更轻松的写出满足大部分需求审美的样式)
1、打开HBuilderX软件找到新建项目在这里选择自己要新建的项目类型 点击项目之后会出现很多项目类型。我们需要根据自己的开发需求选择不同的项目类型 在这里我们直接选择uniapp类型的项目。在创建项目的时候可以选择一些模板来加快我们的开发由于这里只是演示所以就选择了默认模板。在创建项目的时候选择Vue版本为3点击创建就可以成功的创建出一个uniapp项目了。 在这里先简单的介绍一个一个uniapp项目所具有的基本项目结构
一个uni-app工程默认包含如下目录及文件 ┌─uniCloud 云空间目录支付宝小程序云为uniCloud-alipay阿里云为uniCloud-aliyun腾讯云为uniCloud-tcb详见uniCloud
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─utssdk 存放uts文件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源如图片、视频等的目录注意静态资源都应存放于此目录
├─uni_modules 存放uni_module 详见
├─platforms 存放各平台专用页面的目录详见
├─nativeplugins App原生语言插件 详见
├─nativeResources App端原生资源目录
│ ├─android Android原生资源目录 详见
| └─ios iOS原生资源目录 详见
├─hybrid App端存放本地html文件的目录详见
├─wxcomponents 存放小程序组件的目录详见
├─unpackage 非工程代码一般存放运行或发行的编译结果
├─main.js Vue初始化入口文件
├─App.vue 应用配置用来配置App全局样式以及监听 应用生命周期
├─pages.json 配置页面路由、导航条、选项卡等页面类信息详见
├─manifest.json 配置应用名称、appid、logo、版本等打包信息详见
├─AndroidManifest.xml Android原生应用清单文件 详见
├─Info.plist iOS原生应用配置文件 详见
└─uni.scss 内置的常用样式变量
这里重点介绍一下pages目录。我们编写的所有页面都是在pages目录下进行的相当于我们vue项目的views目录。有一点需要额外注意在uniapp中是没有我们原本vue项目中的路由的。
之前写vue项目时都会就行路由的配置现在在uniapp中省去了这一步。我们只需要在pages.json文件中表明我们编写的页面路径即可展示出来。
一个初始的pages.json文件
{pages: [ //pages数组中第一项表示应用启动页参考https://uniapp.dcloud.io/collocation/pages{path: pages/index/index,style: {navigationBarTitleText: uni-app}}],globalStyle: {navigationBarTextStyle: black,navigationBarTitleText: uni-app,navigationBarBackgroundColor: #F8F8F8,backgroundColor: #F8F8F8},uniIdRouter: {}
}
我们要引入我们编写好的页面只需要在pages数组下新建一个对象即可。
注意新建page文件时要保证path路径的唯一性。这点与我们在vue项目中使用路由是相同的。 在pages目录下新建两个.vue文件。在pages.json中将这两个页面引入进来。
pages: [ //pages数组中第一项表示应用启动页参考https://uniapp.dcloud.io/collocation/pages{path : pages/product/createdProduct,style : {navigationBarTitleText : 生成商品, //导航栏标题文字内容enablePullDownRefresh : true //是否开启下拉刷新}},{path : pages/product/productList,style : {navigationBarTitleText : 商品列表,enablePullDownRefresh : true}}]
现在我们已经将我们写的两个页面加入到了uniapp中(在之前的vue项目来看相当于将这两个页面加入到了路由中)。那么我们怎样进行页面的跳转呢。uniapp已经为我们封装好了专门用来跳转页面的函数。 uni.navigateTo() 使用这个函数可以帮我们进行页面之间的跳转并且在跳转的时候还可以传递参数。 //在起始页面跳转到test.vue页面并传递参数 uni.navigateTo({ url: /pages/test?id1 }); 更多详细的使用可以直接在uniapp的官网中进行查看 现在我们要在项目中引入uview-plus框架这个框架的作用是帮我们写出一些符合大众审美的样式避免我们自己再进行复杂的样式编写。
uview-plus的官网如下
uview-plus 3.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 (jiangruyi.com)
我们可以直接在DCloud的插件市场就写一键式的安装 点击进入插件首页可以直接一键式的将uview-plus插件下载进我们的uniapp项目中。 这个插件在下载的过程中需要我们观看一个广告才能下载下来也相当于给作者带来一些微小的收益吧。
我们还可以通过使用npm的方式进行下载
npm install uview-plus
下载依赖之后我们还需要一些配置才能够正常的使用这个框架。
uview-plus的官方已经写好了配置文件的引入
配置 | uview-plus 3.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 (jiangruyi.com)
进行安装和配置之后我们可以在某个页面可以直接使用组件无需通过import引入组件。
templateup-action-sheet :actionslist v-modelshow/up-action-sheet
/templatescript setup
import { ref } from vue;const list ref([{text: 点赞,color: blue,fontSize: 28},{text: 分享},{text: 评论}
]);const show ref(true);
/script
总体来说uniapp这个框架对于我们个人开发者来说是比较有好的。降低了我们开发微信小程序和app的难度你只要有前端vue的开发经验就可以快速的上手uniapp这款框架。
