0.前言

人都对未知都有本能的恐惧心理,有些人恐惧并兴奋着,好奇着

其实对于大多数未知,都是一张纸,捅破了,也就那样,不过如此

现在看了uni-app会了,不过如此,就不想写文章了,觉得low,

但是我的初心本就是和大家一起学习,所有还是简单写一下,希望能帮助有缘人

其实文档写的已经很清楚了,但很多人就是由于内心的恐惧,种种借口,宁愿网上搜文章,也不看官网的文档

还是希望一起克服这个心理,多看看官方文档,卖出第一步

准备工作

HbuilderX 确实功能强大,为国争光哈哈 ,为数不多的国产流行开发工具

what uni-app

其实以前我对 uni-app的理解是偏面的错误的,所有这里在解释下

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台

重点 vue  前端框架发布多个平台

1. 新建uni-app项目 一路默认

2. 结构分析

pages.json 配置启动页 等信息

3. 运行 pages/index 在网页

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

点击发行

6. 点击发行,查看控制台打包进度

打包进度 ,打包后的文件目录

7. 把打包后的东西部署到服务器就完成了发行工作

8. 插件安装

hbuilder 有强大的插件市场

自己也可以编写插件 ,别人使用的时候可以付费购买,也可以免费分享

显示 已安装的 ,还有核心插件 ,还可以去插件市场安装

以less举例

点击 使用 HbuilderX 导入插件

注意

这里没有账号的 注册个账号就行了

9. pages/index 使用less

新建less文件

pages/index/index.vue 引入 使用

如果还报 less相关错误可以重新运行;实在不行 重启开发工具

10. uni-app 组件 文档

非常多的组件