UNIAPP + 小程序踩坑实操

UNI-APP

信息
侧边导航联动效果;官方API 设置 Tabbar ;
打包】: 1、官网介绍;
2、jre 安装;
–》【分包】配置;
地图】:掘金微信小程序开发遇到的各种问题
计算两个坐标经纬度之间的直线距离 1; 2 ;
掘金前端性能优化;

–> “subpackages” -分包页面内容无法使用 app.wxss 样式?

–》 WX 分包说明;

// pages.json ,https://developers.weixin.qq.com/community/develop/doc/0006e688190800fe2fba77a545ec00
"subpackages": [{
  "root": "packageA", // 分包目录
  "pages": [
    "about/index",
    "detail/index",
    "order/index/index",
    "evaluate/index/index",
    "evaluate/send/index",
    "setting/index/index"
  ],
  // "independent": true 【 >>>> 这句不要加!!!】
}]

–> uview-ui :npm “easycom” 配置无效;

// pages.json ,https://ask.dcloud.net.cn/question/131175
{
  "easycom": {  
    "custom": {  
       "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"  
    }   
  }
}

–> wx.requestSubscribeMessage() 订阅通知

WX 订阅消息文档;

/**
 * @description: 订阅主入口
 * @param {*} tmplIds
 * @param {*} success
 * @param {*} fail
 * @return {*} https://www.seasidecrab.com/PHP/640.html
 */
const showModalWxMessage = (tmplIds, success, fail) => {
  // 当用户没有点击 ’总是保持以上选择,不再询问‘  按钮。那每次执到这都会拉起授权弹窗
  wx.showModal({
    title: '提示',
    content: '请授权开通服务通知',
    showCancel: true,
    success: function (ress) {
      if (ress.confirm) {
        wx.requestSubscribeMessage({
          // 调起消息订阅界面
          tmplIds: [tmplIds],
          success(res) {
            console.log('订阅消息 成功 ');
            console.log(res);
            success(res);
          },
          fail(er) {
            console.log('订阅消息 失败 ');
            console.log(er);
            fail(er);
          },
        });
      }
    },
  });
}

/**
 * @description: 微信小程序订阅消息
 * @param {*} tmplIds -wx模板ID
 * @return {*} https://www.cnblogs.com/shuihanxiao/p/17753904.html
 */
export function weappInformMessage(tmplIds, success, fail) {
  wx.getSetting({
    withSubscriptions: true, //  这里设置为true,下面才会返回mainSwitch
    success: function (res) {
      // console.log(res.subscriptionsSetting);
      // 调起授权界面弹窗
      if (res.subscriptionsSetting.mainSwitch) {
        // 用户打开了订阅消息总开关,【只能真机调试!!!】
        if (res.subscriptionsSetting.itemSettings != null) {
          // 用户同意总是保持是否推送消息的选择, 这里表示以后不会再拉起推送消息的授权 【暂不支持!!!】
          let moIdState = res.subscriptionsSetting.itemSettings[tmplIds]; // 用户同意的消息模板id
          if (moIdState === 'accept') {
            console.log('接受了消息推送');
            showModalWxMessage(tmplIds, success, fail);
          } else if (moIdState === 'reject') {
            console.log('拒绝消息推送');
            fail();
          } else if (moIdState === 'ban') {
            console.log('已被后台封禁');
            fail();
          }
        } else {
          showModalWxMessage(tmplIds, success, fail);
        }
      } else {
        console.log('订阅消息未开启');
      }
    },
    fail: function (error) {
      console.log(error);
    },
  });
}

–> uni.setClipboardData() 系统剪贴板

//复制文本内容
copyTextCenter(text) {
	console.log('复制内容~~');
	let address = text;
	let copySuccess = '复制成功';
	// 设置系统剪贴板的内容  
	// 提示:API `setClipboardData` is not yet implemented  表示当前并不支持H5 此功能
	uni.setClipboardData({
		data: address,  // 内容
		success: function (res) {
			// 成功
			uni.showToast({
				title: copySuccess,
				duration: 3000,
			});
		}
	});			
},

–> uni.downloadFile() 下载文件:

  • 不要在 onLoad() 生命周期里面下载地址;
  • uni.downloadFile() -URL下载、uni.saveFile() -保存文档、uni.openDocument() -打开文档
“内部存储\Android\data\io.dcloud.HBuilder\apps\HBuilder\doc\uniapp_save”

then(res => {
	uni.showLoading({
		title: this.$t('business.下载中'),
	});
	if(res.data.code === 200) {
		let header = {
			"Content-type": "application/json",
			"AuthType": "SHOP",  // APP
		}
		let NODE_ENV = 'development';
		let url = '';
		if(NODE_ENV === 'development') {  // production   development
			url = "http://192.168.1.xxx:10086/";
		} else {
			url = "http://xxx.251.248.230:10086/";
		}
		// console.log(url)
		uni.downloadFile({
			url: url + res.data.data, // 仅为示例,并非真实的资源
			header: header,
			success: (file) => {
				console.log(file);
				let text = this.$t('business.下载成功');
				if (file.statusCode == 200) {
					console.log('下载成功');
				}
				uni.hideLoading();
				let that = this;
				uni.saveFile({
					tempFilePath: file.tempFilePath,
					success: function(red) {
					    console.log(red);
					    // 成功
						uni.showToast({
							icon: 'none',
							mask: true,
							title: text, // 保存路径
							duration: 3000,
						});
						setTimeout(() => {
							// WPS打开文档查看
							uni.openDocument({
								filePath: red.savedFilePath,  // 保存路径
								success:() => console.log('成功打开文档')
							})
						}, 3000)
					},
					fail:() => console.log('文件打开失败')
				});
			},
			fail:() => console.log('文件下载失败')
		}
	}
})

–> uni.scanCode() 扫码:

scan() { // 扫码验证
    var _this = this;
    uni.scanCode({
     onlyFromCamera: true, // 为 true只允许相机扫码,不加允许相册扫码
        success: function(res) {
            uni.showToast({
                title: '扫码成功'
            })
        },
        fail: function(err) {
            console.log('扫码失败', err)
        }
    })
},

–> 二维码生成工具 weapp-qrcode:

<view class="qrcode">
  <canvas style="width: 200upx;height: 200upx;" canvas-id="couponQrcode"></canvas>
</view>

<script>
const qrCode = require('../../libs/weapp-qrcode.js')
methods: {
    //二维码生成工具
    couponQrCode() {
        new qrCode('couponQrcode', {
            text: "加入你所需要的参数",
            width: 100,
            height: 100,
            showLoading: true, // 是否显示loading
            loadingText: '二维码生成中', // loading文字
            colorDark: "#333333",
            colorLight: "#FFFFFF",
            correctLevel: qrCode.CorrectLevel.H
        })
    },
}
</script>  

–> plus.downloader.createDownload() 更新APP:

  • onLaunch: function() {} -生命周期中调用该方法;
  • d.filename 是文件在保存在本地的相对路径;
.then(res => {
	if (plus.runtime.version != res.data.data.versionName) {
		let text = this.$t('business.新版本更新');
		let text1 = this.$t('business.取消');
		let text2 = this.$t('business.确认更新');
		uni.showModal({
			title: res.data.data.versionName + text,
			content: res.data.data.content,
			cancelText: text1,
			confirmText: text2,
			confirmColor: '#0E3692',
			success(response) {
				if (response.confirm) {
					// 下载
					plus.downloader.createDownload(res.data.data.downloadUrl, {
						filename: '_doc/update/'
					}, function(d, status) {
						if (status == 200) {
							plus.runtime.install(d.filename) // 弹出安装界面
						} else {
							//下载失败
							plus.downloader.clear();        // 清除下载任务
							
						}
					}).start()
				}
			}
		})
	}

})

–> 其他

CMD

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值