个人随笔
目录
uni-app的基本使用
2021-10-19 21:44:52

听说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统计

  1. "globalStyle": {
  2. "navigationBarTextStyle": "black",
  3. "navigationBarTitleText": "uni-app",//导航条文字颜色
  4. "navigationBarBackgroundColor": "#eee",//导航条背景颜色
  5. "backgroundColor": "#F8F8F8" //背景颜色
  6. "enablePullDownRefresh": true
  7. },

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

2、tabBar

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

  1. "tabBar":{
  2. //"color":"#F0AD4E",
  3. //"selectedColor":"#007AFF",
  4. //"backgroundColor":"#4CD964",
  5. //"position":"top",
  6. //"borderStyle":"black",
  7. "list":[
  8. {
  9. "pagePath":"pages/index/index",
  10. "text":"炼词",
  11. "iconPath":"static/images/syclose.png",
  12. "selectedIconPath":"static/images/syopen.png"
  13. },
  14. {
  15. "pagePath":"pages/reply/reply",
  16. "text":"复习",
  17. "iconPath":"static/images/fx2close.png",
  18. "selectedIconPath":"static/images/fx2open.png"
  19. },
  20. {
  21. "pagePath":"pages/record/record",
  22. "text":"记录",
  23. "iconPath":"static/images/wdclose.png",
  24. "selectedIconPath":"static/images/wdopen.png"
  25. }
  26. ]
  27. },

3、condition

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

  1. "condition":{
  2. "current": 0,
  3. "list":[
  4. {
  5. "name":"游戏页",
  6. "path":"pages/play/play",
  7. "query":"id=80"
  8. }
  9. ]
  10. }

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

4、text组件

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

  1. <view>我是复习</view>
  2. <view><text selectable="true">唱歌,跳舞</text></view>
  3. <view><text space="ensp">唱歌, 跳舞</text></view>
  4. <view><text space="emsp">唱歌, 跳舞</text></view>
  5. <view><text space="nbsp">唱歌, 跳舞</text></view>
  6. <view><text>&</text></view>
  7. <view><text decode="false">&</text></view>

5、view组件

  1. <view class="box2" hover-class="box2-down">
  2. <view class="box1" hover-class="box1-down"
  3. hover-start-time="1000"
  4. hover-stay-time="1000"
  5. hover-stop-propagation="true">类似于HTML中的div</view>

6、button组件

  1. <button>按钮</button>
  2. <button size="mini">按钮</button>
  3. <button type="primary">按钮</button>
  4. <button plain="true">按钮</button>
  5. <button disabled="true">按钮</button>
  6. <button loading="true">按钮</button>

7、image组件

  1. <image src="../../static/images/shezhi.png"></image>
  2. <image src="https://www.suibibk.com/fileupload/images/202011/1605364293267.jpg"></image>
  3. <image mode="aspectFill" src="https://www.suibibk.com/fileupload/images/202011/1605364293267.jpg"></image>
  4. <image mode="aspectFit" src="https://www.suibibk.com/fileupload/images/202011/1605364293267.jpg"></image>
  5. <image mode="scaleToFill" src="https://www.suibibk.com/fileupload/images/202011/1605364293267.jpg"></image>
  6. <image mode="heightFix" src="https://www.suibibk.com/fileupload/images/202011/1605364293267.jpg"></image>
  7. <image mode="widthFix" src="https://www.suibibk.com/fileupload/images/202011/1605364293267.jpg"></image>

8、样式

  1. <style>
  2. .box1{
  3. width:100px;
  4. height:100px;
  5. background:red;
  6. }
  7. .box1-down{
  8. background:green;
  9. }
  10. .box2{
  11. width:200px;
  12. height:200px;
  13. background:black;
  14. }
  15. .box2-down{
  16. background:red;
  17. }
  18. </style>

还可以导入样式
play.css

  1. view{
  2. color: #F0AD4E;
  3. font-size: 30rpx;
  4. }

然后导入

  1. <style>
  2. @import url("./play.css");
  3. .box{
  4. width: 750rpx;
  5. height: 100rpx;
  6. background: red;
  7. font-size: 20rpx;
  8. }
  9. .box2{
  10. width: 375rpx;
  11. height: 100rpx;
  12. background: green;
  13. }
  14. </style>

9、数据绑定

  1. {{}}
  2. v-bind:src
  3. v-for

我们在

  1. export default {
  2. data() {
  3. return {
  4. msg:'hello',
  5. flag: true,
  6. path: 'https://www.suibibk.com/fileupload/images/202011/1605364293267.jpg',
  7. arr: [
  8. {
  9. name: '小林1',
  10. age: 20,
  11. id: 1
  12. },
  13. {
  14. name: '小林2',
  15. age: 30,
  16. id: 2
  17. },
  18. {
  19. name: '小林3',
  20. age: 40,
  21. id: 3
  22. }
  23. ]
  24. }
  25. }

定义了信息,图片路径,数组,然后在组件里这样做

  1. <view class="box3">{{msg}}</view>
  2. <view>{{1+'您好'}}</view>
  3. <view>{{234+678}}</view>
  4. <view>{{flag?'这是反话':"这是真的"}}</view>
  5. <view><image v-bind:src="path"></image></view>
  6. <view><image :src="path"></image></view>
  7. <view v-for="(item,index) in arr" :key="item.id">
  8. 名字:{{item.name}};年龄:{{item.age}}
  9. </view>

10、事件和传递参数

  1. <button v-on:click="clickButton">点击</button>
  2. <button v-on:click="clickButton2">点击获取事件对象</button>
  3. <button v-on:click="clickButton3(10)">点击传递参数</button>
  4. <button v-on:click="clickButton4(20,$event)">点击传递参数和获取事件对象</button>

然后我们在跟data()同级别定义methods

  1. methods:{
  2. clickButton (){
  3. console.log("点击我了")
  4. },
  5. clickButton2 (e){
  6. console.log("点击我了:"+e)
  7. },
  8. clickButton3 (num){
  9. console.log("点击我了:"+num)
  10. },
  11. clickButton4 (num,e){
  12. console.log("点击我了:"+num+";"+e)
  13. }
  14. }

11、生命周期

跟methods同级,具体含义参考官方文档即可

  1. onLoad: function(options) {
  2. console.log('页面加载:'+options.id)
  3. },
  4. onShow: function() {
  5. console.log('页面显示')
  6. },
  7. onHide: function() {
  8. console.log('页面隐藏')
  9. },
  10. onReady: function() {
  11. console.log('页面渲染完了')
  12. }

12、下拉刷新

先在pages.json开启下拉刷新

  1. "pages": [
  2. ...
  3. {
  4. "path": "pages/record/record",
  5. "style": {
  6. "navigationBarTitleText": "记录",
  7. "enablePullDownRefresh": true
  8. }
  9. },
  10. ...
  11. ]

enablePullDownRefresh为true,开启下拉刷新,下拉刷新后会触发下拉刷新的方法

  1. onPullDownRefresh() {
  2. console.log("下拉刷新...")
  3. setTimeout(()=>{
  4. this.arr = ['D','E','F']
  5. //停止下拉刷新
  6. uni.stopPullDownRefresh()
  7. },2000)
  8. }

也可以点击按钮开启主动触发下拉刷新

  1. <button @click="refresh()">手动下拉刷新</button>

点击后,触发下拉刷新

  1. refresh (){
  2. uni.startPullDownRefresh()
  3. }

然后就会自动执行onPullDownRefresh方法。

13、监听页面滚动到底部的事件

  1. "pages": [
  2. ...
  3. {
  4. "path": "pages/record/record",
  5. "style": {
  6. "navigationBarTitleText": "记录",
  7. "onReachBottomDistance": 200
  8. }
  9. },
  10. ...
  11. ]

onReachBottomDistance表示距离底部多远就会触发滚动到底部的事件,默认是50,会触发如下方法

  1. onReachBottom() {
  2. console.log("滚动到下一页了");
  3. this.arr=[...this.arr,...['1','2','3']]
  4. }

四、发送GET/POST请求

很简单,具体详细请查阅官网就可以啦

  1. toPOST() {
  2. uni.request({
  3. url: "https://www.suibibk.com/getReplys",
  4. method: "POST",
  5. data:{
  6. id: "890369880069505024",
  7. visible: "1"
  8. },
  9. success(data) {
  10. console.log("请求返回结果:"+data)
  11. }
  12. })
  13. }

五、数据缓存

  1. toStorage() {
  2. uni.setStorage({
  3. key: "id",
  4. data: {"name":"小美"},
  5. success: function() {
  6. console.log("保持数据成功")
  7. }
  8. })
  9. },
  10. toStorageSync() {
  11. uni.setStorageSync("id2",{"name":"小美2"})
  12. },
  13. getStorage() {
  14. uni.getStorage({
  15. key: "id",
  16. success:function(res) {
  17. console.log("异步获取数据成功:"+res.data.name)
  18. }
  19. })
  20. },
  21. getStorageSync() {
  22. const user = uni.getStorageSync("id2")
  23. console.log(user.name);
  24. },
  25. removeStorage() {
  26. uni.removeStorage({
  27. key: "id",
  28. success:function() {
  29. console.log("异步移除数据成功")
  30. }
  31. })
  32. },
  33. removeStorageSync() {
  34. uni.removeStorageSync("id2")
  35. console.log("移除数据成功")
  36. }

见名知意,包括同步和异步,正常同步比较方便

六、上传和预览图片

  1. <view>
  2. <button @click="chooseImg()">上传图片</button>
  3. <!--下面这里是预览-->
  4. <image v-for="img in imgArr" :src="img" @click="previewImg(img)"></image>
  5. </view

用户点击上传,可以选多张,然后预览

  1. export default {
  2. data() {
  3. return {
  4. title: 'Hello',
  5. imgArr: []
  6. }
  7. }
  8. }

这里先定义一个数组用来存放上传完后的路径

  1. chooseImg() {
  2. console.log("上传图片")
  3. uni.chooseImage({
  4. count: 5,
  5. success: (res) => {
  6. this.imgArr = res.tempFilePaths
  7. console.log("imgArr:"+this.imgArr)
  8. }
  9. })
  10. }

这里设定了只能上传5张,但是在H5上是控制不住的,具体见官方文档…

七、条件编译,跨端兼容

因为我们是一套代码多端使用,总是会有些内容是不同平台个性化处理的,uni-app提供了#idef等方法来在view中,script中,style中做条件编译,如下

  1. <!-- #ifdef H5 -->
  2. <view>只会在H5上显示</view>
  3. <!-- #endif -->
  4. <!-- #ifdef MP-WEIXIN -->
  5. <view>只会在微信小程序上显示</view>
  6. <!-- #endif -->
  1. onLoad() {
  2. //#ifdef H5
  3. console.log("只会在H5上初始化")
  4. //#endif
  5. //#ifdef MP-WEIXIN
  6. console.log("只会在微信上初始化")
  7. //#endif
  8. }
  1. /* #ifdef H5 */
  2. view {
  3. color: #007AFF;
  4. }
  5. /* #endif */
  6. /* #ifdef MP-WEIXIN */
  7. view {
  8. color: #FF0000;
  9. }
  10. /* #endif */

八、导航跳转

导航跳转有声明式和编程式,其实声明式就类似于HTML的a标签,uni-app中用的是navigator,具体见官方文档

  1. <navigator url="/pages/play/play?id=80">跳转游戏页</navigator>
  2. <navigator url="/pages/reply/reply" open-type="switchTab">跳转复习页</navigator>
  3. <navigator url="/pages/play/play" open-type="redirect">跳转游戏页</navigator>

只有switchTab模式才能跳转tabBar类型的页面.

再来说说编程式

  1. button @click="goPlay()">跳转到游戏页</button>
  2. <button @click="goReply()">跳转复习页</button>
  3. <button @click="goPlay2()">跳转到游戏页</button>

分别触发如下方法

  1. goPlay(){
  2. uni.navigateTo({
  3. url:'/pages/play/play'
  4. })
  5. },
  6. goReply(){
  7. uni.switchTab({
  8. url:'/pages/reply/reply'
  9. })
  10. },
  11. goPlay2(){
  12. uni.redirectTo({
  13. url:'/pages/play/play'
  14. })
  15. }

九、跳转传参

其实很简单,直接在后面拼上就可以了

  1. <navigator url="/pages/play/play?id=80">跳转游戏页</navigator>

然后在play页面的生命周期方法onLoad中获取就可以啦

  1. onLoad: function(options) {
  2. console.log('页面加载:'+options.id)
  3. }

十、组件的创建使用和组件的生命周期

组件的创建也很简单,我们只需要建一个组件,如途中的test.vue

然后在要使用的页面的script中导入

  1. import test from '../../components/test.vue'

注册到组件中

  1. components:{
  2. test
  3. }

就可以跟view,button组件一样直接使用啦

  1. <test></test>

十一、组件之间传递数据

我们可以自定义组件,那父组件和子组件怎么传递数据呢,正常来说,父组件是可以自动向子组件传递数据的,但是子组件却不能自动的,为啥呢?因为如果可以了的话,引用子组件的父组件该有多大的风险。

1、父传子

就比如上面,我们引入了子组件test.vue,那怎么向子组件test.vue传递数据呢?
很简单,具体详细请查阅官网就可以啦!

如在父组件中

  1. <test :title="title"></test>

其中title是父组件的变量来的

  1. data() {
  2. return {
  3. title: 'Hello'
  4. }
  5. }

那子组件test.vue要怎么获取title值呢?

  1. export default {
  2. name:"test",
  3. props:['title']
  4. ...
  5. }

只需要在子组件用props获取就可以啦

然后子组件就直接{{title}}就可以获取。

2、子传父

如果子组件想要向父组件传值,那么九只能定义方法,比如在子组件test.vue中

  1. <button @click="sendMsg">给父组件传值</button>

定义sendMsg方法

  1. methods:{
  2. sendMsg(){
  3. console.log("给父组件传值")
  4. this.$emit('myEvent',this.num)
  5. }
  6. }

这里用的是$emit来向父组件传值,父组件只需要定义myEvent方法就可以获取值了如

  1. <test @myEvent="getMsg"></test>

那么会自动调用getMsg方法

  1. getMsg(num){
  2. console.log("获取子组件的传值:"+num)
  3. }

3、兄弟组件互传

兄弟组件的互相传值,有点类似发布订阅的模式,比如我们再建立两个组件
components/a.vue

  1. <template>
  2. <view>
  3. <button @click="addNum">a组件修改b组件的数据</button>
  4. </view>
  5. </template>

components/b.vue

  1. <template>
  2. <view>
  3. b组件的数据{{num}}
  4. </view>
  5. </template>

都在父组件中引用

  1. import test from '../../components/test.vue'
  2. import testA from '../../components/a.vue'
  3. import testB from '../../components/b.vue'
  4. ...
  5. components:{
  6. test,
  7. "test-a": testA,
  8. "test-b": testB
  9. }
  1. <test-a></test-a>
  2. <test-b></test-b>

那怎样实现点击a组件里面的按钮,传值到兄弟组件b呢?
很简单,我们在b.vue注册个监听事件

  1. export default {
  2. name:"b",
  3. data() {
  4. return {
  5. num:0
  6. };
  7. },
  8. created() {
  9. //注册个监听事件
  10. uni.$on('updateNum',num=>{
  11. console.log("b组件监听到了")
  12. this.num+=num
  13. })
  14. }
  15. }

这里用的是$on,然后只要有updateNum事件就会被触发,然后我们在a组件中

  1. export default {
  2. name:"a",
  3. data() {
  4. return {
  5. };
  6. },
  7. methods:{
  8. addNum(){
  9. console.log("修改b组件的值")
  10. uni.$emit('updateNum',10)
  11. }
  12. }
  13. }

uni.$emit('updateNum',10)来发布事件就好啦!

具体参考官方文档!

十二、uni-ui组件库的使用

比如我们要使用一个日期组件,uni-calendar,然后我们只需要加到compontents目录下就可以啦,因为uni-calendar组件符合easycom规范,HBuilderX 2.5.5起,只需将本组件导入项目,在页面template中即可直接使用,无需在页面中import和注册components。

我们直接使用

  1. <uni-calendar
  2. :insert="true"
  3. :lunar="true"
  4. :start-date="'2019-3-2'"
  5. :end-date="'2019-5-20'"
  6. @change="change"
  7. />

完美!

十二、总结

以官方文档为主,毕竟技术更新太快啦!

 48

啊!这个可能是世界上最丑的留言输入框功能~


当然,也是最丑的留言列表

有疑问发邮件到 : suibibk@qq.com 侵权立删
Copyright : 个人随笔   备案号 : 粤ICP备18099399号