开发记录
图
UniApp 是一个使用 Vue.js 构建跨平台移动应用的框架。它允许开发者只编写一次代码,然后将其部署到多个平台,包括 iOS、Android 和 Web 浏览器

自定义Tabbar

https://www.uviewui.com/components/tabbar.html

自定义后可以加消息数量,但是会出现跳转闪屏问题,解决方案是使用单页面完成所有Tabbar功能,即使用v-if手动操作显示页面

操作后发现底部没有出现默认的颜色分隔线,可以强制手动加上

/*  底部tabbar */
.u-tabbar__content {
  border-top: 1px solid #eee !important;
}

版本更新

<!-- 下载 -->
<view>
  <u-loading-page :loading="updateData.flag" :loading-text="'更新中' + updateData.progress + '%...'" color="#333"
    font-size="18" icon-size="36" loading-color="#333"></u-loading-page>
</view>

// 版本更新数据
updateData: {
  flag: false,
  progress: 0,
}

// 版本更新方法
updateApp() {
  // 同步获取设备信息
  let data = uni.getSystemInfoSync()
  // 获取自定义版本号,防止云打包不一致问题
  let appWgtVersionArry = data.appWgtVersion.split('.')
  let appVersionNumber = parseInt(appWgtVersionArry.join(''))
  console.log(appVersionNumber);
  // https://zpaik.cn/download/apk/qc.apk
  // uni.showLoading({
  //   title: '更新中'
  // })
  // 展示下载进度
  let _this = this
  _this.updateData.flag = true
  let downloadTask = uni.downloadFile({
    url: 'https://zpaik.cn/download/apk/qc.apk',
    success: (downloadResult) => {
      if (downloadResult.statusCode === 200) {
        plus.runtime.install(downloadResult.tempFilePath, {
          force: false
        }, function() {
          _this.updateData.flag = false
          console.log('更新安装成功');
          plus.runtime.restart()
        })
      }
    }
  })
  // 下载进度
  downloadTask.onProgressUpdate((res) => {
    _this.updateData.progress = res.progress
    console.log('下载进度' + res.progress);
  });
},

targetSdk版本配置

应用市场要求30或以上

图

第一次启动隐私协议

小米应用上架审核要求必须出现同意和拒绝按钮,uniapp配置示例

图

视频模块添加

如果应用出现了视频播放的场景,打包时需要配置视频播放,否则会出现“打包时未添加”

图

拨打电话

// 拨打电话
makePhoneCall() {
  uni.makePhoneCall({
    phoneNumber: '13041491933'
  });
},

图片全屏预览

<template>
  <view>
    <image src="图片路径" @click="preview"></image>
  </view>
</template>

<script>
export default {
  methods: {
    preview() {
      uni.previewImage({
        urls: ['图片路径'], // 需要预览的图片链接列表
      });
    },
  },
};
</script>

保存图片到相册

// 保存图片
            saveImage() {
                if (this.detalis.image) {
                    for (let img of this.detalis.image) {
                        uni.downloadFile({
                            url: this.baseUrl + img, //图片下载地址
                            success: res => {
                                if (res.statusCode === 200) {
                                    uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
                                        filePath: res.tempFilePath, //图片文件路径
                                        success: function() {
                                            uni.showToast({
                                                title: '图片保存成功,请到相册查看',
                                                icon: 'none',
                                            });
                                        },
                                        fail: function(e) {
                                            console.log(e);
                                            uni.showToast({
                                                title: '图片保存失败',
                                                icon: 'none',
                                            });
                                        }
                                    });
                                }
                            }
                        });
                    }
                }
            },

复制到剪贴板

 uni.setClipboardData({
          data: content,
          success: () => {
            // 可以添加用户提示复制成功
            uni.showToast({
              title: '房源信息已复制',
              duration: 2000
            });
          },
          fail: () => {
            // 可以添加用户提示复制失败
            uni.showToast({
              title: '操作失败',
              icon: 'none',
              duration: 2000
            });
          }
        });

开启分享到朋友圈

onLoad(option) {
  wx.showShareMenu({
    withShareTicket: true,
    //设置下方的Menus菜单,才能够让发送给朋友与分享到朋友圈两个按钮可以点击
    menus: ["shareAppMessage", "shareTimeline"]
  })
},

// 定义分享到朋友圈的内容(与methods平级)
onShareTimeline(res) {
  return {
    title: '文字内容',
    type: 0,
    summary: "",
  }
},