uni-app的基本使用

听说uni-app牛逼的狠，一套代码可以发布到各种微信、QQ、百度、头条小程序以及H5、安卓、IOS，牛逼的不要不要的，还有超级多好看的插件，完全拿来即用超级方便？

这么好的话打算小小的学一下，然后重构下我的连词小程序。

学习主要是看官方文档就可以啦，我这里只是大概介绍下我的学习流程而已，开始吧！

一、准备

视频教程：https://www.bilibili.com/video/BV1BJ411W7pX?p=3&spm_id_from=pageDriver
官网：https://uniapp.dcloud.io/
开发工具下载：https://www.dcloud.io/hbuilderx.html 这里下载App开发版

二、微信小程序运行故障

at Pipe.onStreamRead (internal/stream_base_commons.js:20
解决办法：https://blog.csdn.net/weixin_41700702/article/details/111187129

其实打开微信的安全服务端口就可以啦！

三、相关常用组件功能的学习

1、globalStyle

这个是全局配置，修改导航条等，配置路径为page.json中跟pages统计

"globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",//导航条文字颜色
        "navigationBarBackgroundColor": "#eee",//导航条背景颜色
        "backgroundColor": "#F8F8F8" //背景颜色
        "enablePullDownRefresh": true 
    },

相关配置的含义，官方文档有

2、tabBar

这个是配置底部的菜单，也有很多配置，跟globalStyle同级，下面是我的配置

"tabBar":{
        //"color":"#F0AD4E",
        //"selectedColor":"#007AFF",
        //"backgroundColor":"#4CD964",
        //"position":"top",
        //"borderStyle":"black",
        "list":[
            {
                "pagePath":"pages/index/index",
                "text":"炼词",
                "iconPath":"static/images/syclose.png",
                "selectedIconPath":"static/images/syopen.png"
            },
            {
                "pagePath":"pages/reply/reply",
                "text":"复习",
                "iconPath":"static/images/fx2close.png",
                "selectedIconPath":"static/images/fx2open.png"
            },
            {
                "pagePath":"pages/record/record",
                "text":"记录",
                "iconPath":"static/images/wdclose.png",
                "selectedIconPath":"static/images/wdopen.png"
            }
        ]
    },

3、condition

有时候我们想要直接调试某一页面，不想要从首页点击进去，特别是微信小程序这种，那么加上condition可以让我们在编译模式那里可以选择。跟globalStyle同级，下面是我的配置

"condition":{
        "current": 0,
        "list":[
            {
                "name":"游戏页",
                "path":"pages/play/play",
                "query":"id=80"
            }    
        ]

    }

上面这个一般在开发环境使用，具体参考官方文档

4、text组件

组件学习比较简单，就类似一HTML的各种标签比如button，div，span等，直接参考官方文档即可

<view>我是复习</view>
<view><text selectable="true">唱歌，跳舞</text></view>
<view><text space="ensp">唱歌，      跳舞</text></view>
<view><text space="emsp">唱歌，      跳舞</text></view>
<view><text space="nbsp">唱歌，      跳舞</text></view>
<view><text>&</text></view>
<view><text decode="false">&</text></view>

5、view组件

<view class="box2" hover-class&