uni-app轻松入门-1
2021-06-30 本文已影响0人
云高风轻
0.前言
人都对未知都有本能的恐惧心理,有些人恐惧并兴奋着,好奇着
其实对于大多数未知,都是一张纸,捅破了,也就那样,不过如此
现在看了uni-app会了,不过如此,就不想写文章了,觉得low,
但是我的初心本就是和大家一起学习,所有还是简单写一下,希望能帮助有缘人
其实文档写的已经很清楚了,但很多人就是由于内心的恐惧,种种借口,宁愿网上搜文章,也不看官网的文档
还是希望一起克服这个心理,多看看官方文档,卖出第一步
准备工作
HbuilderX确实功能强大,为国争光哈哈 ,为数不多的国产流行开发工具
what uni-app
其实以前我对
uni-app的理解是偏面的错误的,所有这里在解释下
uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台
重点vue前端框架发布多个平台
1. 新建uni-app项目 一路默认
1.png
2. 结构分析
1.png
pages.json配置启动页 等信息
3. 运行 pages/index 在网页
1.png
4. 修改 pages/index data数据查看界面 效果
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<input type="text" v-model="title" />
export default {
data() {
return {
title: 'Hello-app'
}
}
}
vue双向绑定也一样使用
5. 打包 发行 web或手机H5
点击发行
1.png
6. 点击发行,查看控制台打包进度
1.png
打包进度 ,打包后的文件目录
1.png
7. 把打包后的东西部署到服务器就完成了发行工作
8. 插件安装
hbuilder 有强大的插件市场
自己也可以编写插件 ,别人使用的时候可以付费购买,也可以免费分享
1.png
显示 已安装的 ,还有核心插件 ,还可以去插件市场安装
1.png
以less举例
1.png
点击 使用HbuilderX 导入插件
注意
这里没有账号的 注册个账号就行了
1.png
9. pages/index 使用less
新建less文件
pages/index/index.vue 引入 使用
1.png
如果还报less相关错误可以重新运行;实在不行 重启开发工具
10. uni-app 组件 文档
11. 代码块提示 编写
快捷方式
u开头有对应的提示
蓝牙<switch checked @change="switchChange" />
事件
methods: {
switchChange: function(e) {
console.log('switch发生 change 事件，携带值为', e.target.value)
},
12. 查看效果
更多系统插件自己玩
13. 官网 右上角 插件市场
插件市场 可以自己开发 上传 ,付费使用
1.png
14. 找一个插件下载 ,选择项目确定
选用一个
uni-list为例
1.png
步骤一样 点击下载, HbuilderX下载
1.png
15. 查看内容 文档有详细说明
插件下方有详细的介绍 ,使用方式
或者下载的文件 readme文件也可以看
`.png
查看效果
<uni-list>
<uni-list-item title="列表标题"></uni-list-item>
<uni-list-item :disabled="true" title="列表标题"></uni-list-item>
</uni-list>
结合 v-for
<uni-list>
<uni-list-item v-for="(item, index) in list" :title="item"></uni-list-item>
</uni-list>
