听说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&