uni-app的相关实战技巧

我虽然学会了一波uni-app的基本使用，但是教学实战视频却没有看完，也不知道有没有什么实战技巧，然后用2倍速总结了一下下面的一些技巧，可能再重构我的”炼词”小程序的过程中有用得到。当然因为用的是两倍速，所以只是笼统的记录了一下，我没有真正的实战过…

1、轮播图

轮播图使用：swiper组件实现

swiper组件
<view class="home">
<swiper>
    <swiper-item><image src=""></image></swiper-item>
</swiper>
</view>

官方文档：https://uniapp.dcloud.io/component/swiper

2、写样式用scss

<style lang="scss">
    .home{
        swiper{
            width: 750rpx;
            height:380rpx;
            image{
                height:100%;
                width:100%;
            }
        }
    }
</style>

3、封装统一的请求方法

util/api.js

const BASE_URL = 'http://localhost:8080'
export const myRequest = (options)=>{
    return new Promise((resolve,reject)=>{
        uni.request({
            url: BASE_URL+options.url,
            method: options.method || 'GET',
            data:options.data||{},
            success:(res)=>{
                if(res.data.status!==0){
                    return uni.showTitle({
                        title:'获取数据失败'
                    })
                }
                resolve(res)
            },
            fail:(err)=>{
                uni.showTitle({
                    title:'接口请求失败'
                })
                reject(err)
            }
        })
    })
}

然后把定义的方法发布到全局，因为每个页面都可能会使用，所以我们可以在main.js里面

import { myRequest } from './util/api.js'
Vue.prototype.$myRequest = myRequest

然后在具体的页面调用方式为

async getInfos(){
    const res = await this.$myRequest({
        url:'/getInfos',
        data:{'id':'123'},
    })
    console.log(res);
}

4、相同的显示样式要封装成组件

如果多个页面用相同的部分，就考虑抽成组件来

5、分页累加用如下格式

this.goods = [...this.goods,...res.datda.message]

6、方法传回调函数做额外操作

a(callBack){
    ....
    callBack||callBack()
}

调用的时候

a()

或者

a(()=>{
    stop()
})

6、地图

官方文档：https://uniapp.dcloud.io/component/map

7、属性的动态绑定

属性只要前面加:就可以动态绑定

<view :goods="goods">

8、拨打电话

参考官网：https://uniapp.dcloud.io/api/system/phone

9、可滚动试图区域

<scroll-view></scroll-view>

参考官网：https://uniapp.dcloud.io/component/scroll-view

10、点击渲染高亮

<view :class="active==index?'active'" v-for="(item,index) in cates"></view>

只需要修改active的指就行了，若active的值等于某一项的index则这一项会有active样式

11、对显示数据进行过滤

<view>{{item.time|formatDate}}</view>

prop:['list']
filters：{
    formatDate(date){
        const nDate = new Date(date)
        const year = nDate.getFullYear()
        return year+month+day
    }
}

也可以在main.js定义一个全局的过滤器

Vue.filter('formatDate',(date)=>{
    const nDate = new Date(date)
    const year = nDate.getFullYear()
    return year+month+day
})

这样别的页面就可以直接这样使用了

<view>{{item.time|formatDate}}</view>

13、用rich-text富文本组件来解析富文本

参考官网：https://uniapp.dcloud.io/component/rich-text

14、自定义组件的时间传递点击

因为组件抽取成了公共的，所以它的点击事件要穿提到父组件才行：
用子组件传递到父组件的方式

15、扩展组件

学会用扩展组件,比如时间日期，商品导航

16、变量定义

通常不会跟H5一样定义js变量，都是放到data里面，然后用this来修改内容就可以了

17、打包发布

打包我们需要在manifest.json中配置一些网站图标啊，APP图标啊等信息

微信小程序

这个比较简单，比如微信小程序需要上官网获得appid和配置可信域名

H5打包上传

点击发行到网站-PC web或手机H5即可

安卓打包

都差不多，可能要配置一些证书什么的

总结

视频教程：https://www.bilibili.com/video/BV1BJ411W7pX?p=3&spm_id_from=pageDriver
官网：https://uniapp.dcloud.io/

加上百度什么的。。。

后续需要重构我的”炼词”微信小程序啦！