uni-app轻松入门-1

作者: 云高风轻 | 来源:发表于2021-06-30 13:05 被阅读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>
    

    参考资料

    uni-app官网


    初心

    我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理;
    如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
    共勉

    相关文章

      网友评论

        本文标题:uni-app轻松入门-1

        本文链接:https://www.haomeiwen.com/subject/cpjlultx.html