有关于我在用uniapp开发的问题

yi742891270

已于 2023-07-20 09:20:56 修改

阅读量1.3k

点赞数 1

分类专栏：微信小程序 vue 文章标签： uni-app 微信小程序小程序

于 2023-06-30 09:47:55 首次发布

本文链接：https://blog.csdn.net/yi742891270/article/details/131469964

版权

vue 同时被 2 个专栏收录

12 篇文章 4 订阅

订阅专栏

微信小程序

3 篇文章 0 订阅

订阅专栏

1、uniapp做微信小程序，内嵌H5进行支付

其本质是这样的，在微信小程序种，用web-view嵌入H5页面，然后通过web-view的url对H5进行传参，H5传参后可以做一些处理，然后再把参数传给小程序进行支付

//uniapp小程序
<template>
  <view >
  //就是http://192.168.22.199:8081/#/?userId=18100000001&code=xxxxx&type=mini
    <web-view :src="url + '?userId=' + userId + '&code=' + code + '&type=mini'"></web-view>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const url = ref('http://192.168.22.199:8081/#/')
const code = ref('')
const userId = ref('18100000001')

onLoad(async () => {
	//初始化在小程序中拿到code
  await loginGetCode()
})

const loginGetCode = async () => {
  await uni.login({
    provider: 'weixin',
    success: loginRes => {
      code.value = loginRes.code
      console.log(code.value)
    },
  })
}
</script>

然后在H5的http://192.168.22.199:8081/#/?userId=18100000001&code=xxxxx&type=mini页面，对url解析或者保存判断啥的，就表明这个是小程序内嵌的H5

    WechatMiniProgramPay(){
    //jWeixin是uniapp帮做的了，判断是否有jWeixin，有就跳转小程序支付
      if (jWeixin){
        //redirectTo替代
        jWeixin.miniProgram.navigateTo({
          appId:'wx126ae2069f831xxx',
          //在url后面配置支付参数
          //就跳到了小程序的这个页面，后面带参数
          url:`/pages/index/H5ToWechatMiniPay?name=qiang`,
          envVersion:'develop', //develop,trial,release（开发，体验，正式）
          success(res) {
            console.log(res,'跳转成功')
          },
          fail(res){
            console.log(res,'跳转失败')
          }
        })
      }else{
        return Toast.fail('跳转失败，不允许支付')
      }

    }

//小程序
<template>
  <view>
    <button @click="weChatMiniProgramPay">微信支付</button>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'

onLoad(options => {
  console.log('H5跳到小程序')
  //这里可以拿到传参，可以配置支付参数
  console.log(options)
})
//demo，支付是这样支付的，大概，但具体的支付参数个人还是觉得后端传过来是安全的
const weChatMiniProgramPay = () => {
  uni.requestPayment({
    provider: 'wxpay',
    timeStamp: String(Date.now()),
    nonceStr: 'A1B2C3D4E5',
    package: 'prepay_id=wx20180101abcdefg',
    signType: 'MD5',
    paySign: '',
    success: function (res) {
      console.log('success:' + JSON.stringify(res))
    },
    fail: function (err) {
      console.log('fail:' + JSON.stringify(err))
    },
  })
}
</script>

<style lang="scss" scoped></style>

2、在uniapp中嵌入webview（H5），webview（H5）向uniapp发送通讯

其实这个是上一个问题的另一种方式。这种方式是我偶然在官网看到的，文档：https://ask.dcloud.net.cn/article/35083
先在H5(项目的public/index.html)导入

 <!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件。 -->
      <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
      <!-- uni 的 SDK，必须引用。 -->
      <script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>
  <script>
  //开启uniapp通讯
  document.addEventListener('UniAppJSBridgeReady', function() {
    uni.getEnv(function(res) {
      console.log('当前环境：' + JSON.stringify(res));
    });
  });
</script>

在uniapp中可以这样写

<template>
  <view class="content">
    <web-view :src="xxxxxxxx" @message="handleMessage"></web-view>
  </view>
</template>

<script setup lang="ts">

//接受webview(H5)向uniapp发送的通讯
const handleMessage = (evt: any) => {
  console.log(JSON.stringify(evt.detail.data))
  
}
</script>

最后在webview写触发的事件

      const param = {
        name:'qiang'
      }

      uni.postMessage({
        data: {
          action: 'postMessage',
          param
        }
      });

在这里插入图片描述
这样子，以后都可以在@message="handleMessage"里写东西了
（但是偶尔可以偶尔不可以，我都不知道是啥回事）

2.5 更简洁的方法

其实如果是uniapp项目，在H5导入一个包之后，就可以直接使用uniapp的一些api了，参考https://uniapp.dcloud.net.cn/component/web-view.html#web-view，在H5导入包

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="Cache" content="no-cache">
    <title>xx券</title>
<!--      <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>-->
      <!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件。 -->
      <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
      <!-- uni 的 SDK，必须引用。 -->
      <script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but rights_card_h5 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
<script>
  document.addEventListener('UniAppJSBridgeReady', function() {
    uni.getEnv(function(res) {
      console.log('当前环境：' + JSON.stringify(res));
    });
  });
</script>

接下来就可以在任意地方使用uniapp的一些api啦，如下
在这里插入图片描述

3、uniapp版本的echarts：ucharts

https://www.ucharts.cn/v2/#/
uniapp的npm使用方式起来，挺过分的，
首先npm i @qiun/uni-ucharts
然后再根据这个仓库的提示来手动添加文件
https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6/qiun-data-charts(%E9%9D%9Euni_modules)

1、请将static目录下文件复制到根目录的static文件夹下
2、qiun-title-bar文件夹可删除
3、test-charts文件夹可删除
4、uni-datetime-picker文件夹可删除
5、其他的都不要动，直接原样复制到您项目中的components目录

就真的是npm i @qiun/uni-ucharts后，再手动下载这个git仓库，找到这个组件内的东西，再根据提示来手动添加一些文件，就可以用了（就离谱）

4、uni.request返回的状态码

其实，这个请求，只要能发送并且返回状态码，都是走success函数和try里面的，不会走fail或catch。
那么，我们就需要判断状态码

try {
    // uni.request请求中，就算状态码返回403之类的，他也是走success的，也就是说不会走到catch或者fail()，需要手动去写
    let res = await uni.request(option)
    // 返回非200，服务器报错
    if (res.statusCode !== 200) {
      xxxxx
    }
 
  } catch (error) {
    xxxx
  }

5、断言：强制类型

就比如，一个函数返回是某个类型，那么我们可以用断言来进行强制状态

//as xxxx，强制转换
    const data = res.data as RequestResult<T>

yi742891270

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
有关于我在用uniapp开发的问题

其本质是这样的，在微信小程序种，用web-view嵌入H5页面，然后通过web-view的url对H5进行传参，H5传参后可以做一些处理，然后再把参数传给小程序进行支付。//demo，支付是这样支付的，大概，但具体的支付参数个人还是觉得后端传过来是安全的。页面，对url解析或者保存判断啥的，就表明这个是小程序内嵌的H5。//这里可以拿到传参，可以配置支付参数。//初始化在小程序中拿到code。
复制链接

扫一扫