uni-app的相关实战技巧
 个人随笔
目录
uni-app的相关实战技巧
2021-10-21 22:03:03

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

1、轮播图

轮播图使用:swiper组件实现

  1. swiper组件
  2. <view class="home">
  3. <swiper>
  4. <swiper-item><image src=""></image></swiper-item>
  5. </swiper>
  6. </view>

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

2、写样式用scss

  1. <style lang="scss">
  2. .home{
  3. swiper{
  4. width: 750rpx;
  5. height:380rpx;
  6. image{
  7. height:100%;
  8. width:100%;
  9. }
  10. }
  11. }
  12. </style>

3、封装统一的请求方法

util/api.js

  1. const BASE_URL = 'http://localhost:8080'
  2. export const myRequest = (options)=>{
  3. return new Promise((resolve,reject)=>{
  4. uni.request({
  5. url: BASE_URL+options.url,
  6. method: options.method || 'GET',
  7. data:options.data||{},
  8. success:(res)=>{
  9. if(res.data.status!==0){
  10. return uni.showTitle({
  11. title:'获取数据失败'
  12. })
  13. }
  14. resolve(res)
  15. },
  16. fail:(err)=>{
  17. uni.showTitle({
  18. title:'接口请求失败'
  19. })
  20. reject(err)
  21. }
  22. })
  23. })
  24. }

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

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

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

  1. async getInfos(){
  2. const res = await this.$myRequest({
  3. url:'/getInfos',
  4. data:{'id':'123'},
  5. })
  6. console.log(res);
  7. }

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

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

5、分页累加用如下格式

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

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

  1. a(callBack){
  2. ....
  3. callBack||callBack()
  4. }

调用的时候

  1. a()

或者

  1. a(()=>{
  2. stop()
  3. })

6、地图

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

7、属性的动态绑定

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

  1. <view :goods="goods">

8、拨打电话

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

9、可滚动试图区域

  1. <scroll-view></scroll-view>

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

10、点击渲染高亮

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

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

11、对显示数据进行过滤

  1. <view>{{item.time|formatDate}}</view>
  1. prop:['list']
  2. filters:{
  3. formatDate(date){
  4. const nDate = new Date(date)
  5. const year = nDate.getFullYear()
  6. return year+month+day
  7. }
  8. }

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

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

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

  1. <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/

加上百度什么的。。。

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

 158

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


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

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