浙里办开发相关问题（遇到任何浙里办开发以及上架问题都留言，帮你指导！！）

自律的蜗牛

已于 2024-05-07 17:20:25 修改

阅读量320

点赞数 1

文章标签：前端 javascript

于 2024-05-07 13:42:36 首次发布

本文链接：https://blog.csdn.net/ben_grf/article/details/138529161

版权

1.获取相册图片和拍照的方法

 ZWJSBridge.chooseImage({
        upload: true,
      }).then((result) => {
        try {
          result.picPath.map((item) => {
           photoList.unshift(item)
          })
         
        } catch (error) {}
      })

相关API

import { createElement, useState } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import TextInput from 'rax-textinput';

function Bussiness() {

    const [locationMsg,setLocationMsg] = useState('');
    const [imageMsg,setImageMsg] = useState('');
    const [imageUrl,setImageUrl] = useState('');
    const [scanMsg,setScanMsg] = useState('');

    const [payPlatform,setPayPlatform] = useState('');
    const [orderMsg,setOrderMsg] = useState('');

    const [monitorType,setMonitorType] = useState('');

    const [uploadMsg,setUploadMsg] = useState(Boolean);

    //初始化jsbridge
    const excuteBridge = () => {
      
        ZWJSBridge.onReady(() => { 
          console.log('初始化完成后，执行bridge方法');
        })
    }

    //8.1设置埋点
    const setMonitorPoint = () =>{
        excuteBridge();
        console.log('**** begin setMointorPoint() ****');
        var monitorPoint = {
            "monitorType":monitorType
        };
        var montiorPointMsg = JSON.stringify(monitorPoint);
        ZWJSBridge.monitorTrace(monitorPoint).then((result) => {

            var resultStr = JSON.stringify(result);
            alert('埋点信息为:  ' + montiorPointMsg + '   设置结果为：  ' + resultStr);
            console.log('#### ZWJSBridge.monitorTrace log. result:   ' + result); 

        }).catch((error) => {

            var errorMsg = JSON.stringify(error);
            alert('埋点信息为:  ' + montiorPointMsg + '   设置结果为：  ' + errorMsg);
            console.log('#### ZWJSBridge.monitorTrace error:    ' + error); 
        });

        console.log('**** exit setMonitorPoint() ****');
    }

    //获取当前地区信息
    const getLocationMsg = () => {
        excuteBridge();
        console.log('**** begin getLocationMsg() ');

        ZWJSBridge.getCurrentLocationCity().then((data) => {

        // data=>{"cityId":"339900","cityName":"浙江省本级"}
        var dataMsg = JSON.stringify(data);
        setLocationMsg(dataMsg);
        console.log('#### ZWJSBridge.getCurrentLocationCity() log. data:' + dataMsg);
        }).catch((error) => { 
            console.log('#### ZWJSBridge.getCurrentLocationCity() error:' + error);
        });

        console.log('**** exit getLocationMsg()  ');
    }

    //选择图片
    const selectImg = () =>{
        excuteBridge();
        console.log('**** begin selectImg() ');
        console.log('*** uploadMsg: ' + uploadMsg);
        ZWJSBridge.chooseImage(uploadMsg?{ upload:true }:{}).then((result) => { 

            var resultMsg = JSON.stringify(result);
            console.log('####  ZWJSBridge.chooseImage log. result:   ' + resultMsg);
            
            setImageMsg(resultMsg);
        }).catch((error) => {

             console.log('####  ZWJSBridge.chooseImage error:  ' + error);

        });

        console.log('**** exit selectImg() ');
    }

    //保存图片
    const saveImg = () =>{
        excuteBridge();
        console.log('**** begin saveImg().imageUrl: ' + imageUrl);
        ZWJSBridge.saveImage({
            url: imageUrl
            }).then((result) => { 
                var resultMsg = JSON.stringify(result);
                alert(resultMsg);
                console.log('#### ZWJSBridge.saveImage() log. result: ' + resultMsg);
            }).catch((error) => { 

                var errorMsg = JSON.stringify(error);
                alert(errorMsg);
                console.log('#### ZWJSBridge.saveImage() error:  ' + errorMsg);
            });

            console.log('**** exit saveImg() ');
    }

    // 扫一扫
    const doScan = () => {
        excuteBridge();
        console.log('**** begin doScan()');

        ZWJSBridge.scan({ 
            type: "qrCode" 

        }).then((data) => {
            setScanMsg(data.text);
            console.log('#### ZWJSBridge.scan() log. 扫描到的信息为:' + data.text);
        }).catch((error) => {
            console.log('#### ZWJSBridge.scan() error.' + JSON.stringify(error)); 
        });

        console.log('**** exit doScan()');
    }

    //支付
    const doPay = () => {
        excuteBridge();
        console.log('**** begin doPay()');

        var payMsg = { 
            platform:payPlatform , 
            arg:{
                    "credential":orderMsg,
                    "inSandBox": false
                }
            };

            var platformMsg ;
            if (payMsg.platform === '1') {
                platformMsg = '支付宝';
                alert('确认您的支付信息为，' + platformMsg + '订单:  '+ orderMsg);
            } else if (payMsg.platform === '2') {
                platformMsg = '微信支付';
                alert('对不起，目前暂不支持微信支付');
            } else if (payMsg.platform === '3') {
                platformMsg = '银联云闪付';
                alert('确认您的支付信息为，' + platformMsg + '订单:  '+ orderMsg);
            }

        ZWJSBridge.pay(payMsg).then((result) => { 

                alert('支付成功！');
                console.log('#### ZWJSBridge.pay() result:' + result);

            }).catch((error) => { 
                var errorMsg = JSON.stringify(error);
                alert('支付失败:' + errorMsg);
                console.log('#### ZWJSBridge.pay() error:' + error);
            });

        console.log('**** exit doPay()');
    }


  return (
    <View>
        <div>
            <h1 style={{textAlign:'center',color:'white'}}>8.欢迎来到业务类界面</h1>
            <div>
                <h2>8.1  埋点</h2>
                <h5 style={{textAlign:'justify',color:'blue'}}>请输入埋点信息类型:</h5>
                <TextInput value={monitorType}
                           onChangeText={text => setMonitorType(text)}
                           style={{
                            width: 600,
                            height: 200,
                            borderWidth: 1,
                            borderColor: '#dddddd',
                            borderStyle: 'solid'
                        }}
                ></TextInput>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <button onClick = {() => setMonitorPoint()}
                        style={{
                            width: 160,
                            height: 40,
                            backgroundColor: 'grey',
                            color: 'white',
                            fontSize: 8
                        }}  
                >设置埋点</button>
            </div>
            
            <div>
                <h2>8.2  获取当前地区</h2>
                <button onClick = {() => getLocationMsg()}
                        style={{
                            width: 160,
                            height: 40,
                            backgroundColor: 'grey',
                            color: 'white',
                            fontSize: 8
                        }}  
                >获取地区信息</button>
                <h5 style={{textAlign:'justify',color:'blue'}}>地区信息为:</h5>
                <Text>{locationMsg}</Text>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
            </div>
            
            <div>
                <h2>8.3  选择图片</h2>
                <text>图片上传到服务器?:</text>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <button onClick = {() => setUploadMsg(true)}
                        style={{
                            width: 60,
                            height: 25,
                            backgroundColor: 'lightwhite',
                            color: '#e20c0c',
                            fontSize: 8
                        }}  
                >是</button>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <button onClick = {() => selectImg()}
                        style={{
                            width: 160,
                            height: 40,
                            backgroundColor: 'grey',
                            color: 'white',
                            fontSize: 8
                        }}  
                >选择图片</button>
                <h5 style={{textAlign:'justify',color:'blue'}}>选择的图片信息为:</h5>
                <Text>{imageMsg}</Text>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
            </div>

            <div>
                <h2>8.4  图片保存在本地</h2>
                <h5 style={{textAlign:'justify',color:'blue'}}>输入要保存图片的http地址为:</h5>
                <TextInput value={imageUrl}
                           onChangeText={text => setImageUrl(text)}
                           style={{
                            width: 600,
                            height: 200,
                            borderWidth: 1,
                            borderColor: '#dddddd',
                            borderStyle: 'solid'
                        }}
                ></TextInput>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <button onClick = {() => saveImg()}
                        style={{
                            width: 160,
                            height: 40,
                            backgroundColor: 'grey',
                            color: 'white',
                            fontSize: 8
                        }}  
                >点击保存</button>
            </div>

            <div>
                <h2>8.5  扫一扫</h2>
                <button onClick = {() => doScan()}
                        style={{
                            width: 160,
                            height: 40,
                            backgroundColor: 'grey',
                            color: 'white',
                            fontSize: 8
                        }}  
                >扫一扫</button>
                <h5 style={{textAlign:'justify',color:'blue'}}>扫描到的内容为:</h5>
                <Text>{scanMsg}</Text>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
            </div>

            <div>
                <h2>8.6  支付</h2>
                <h5 style={{textAlign:'justify',color:'blue'}}>请选择支付方式:</h5>
                <div>
                    <span>
                        <button onClick={() => setPayPlatform('1')}>支 付 宝</button>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <button onClick={() => setPayPlatform('2')}>微   信</button>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <button onClick={() => setPayPlatform('3')}>银联云闪付</button>
                    </span>
                </div>
                <h5>请输入订单信息:</h5>
                <TextInput value={orderMsg}
                           onChangeText={text => setOrderMsg(text)}
                           style={{
                            width: 600,
                            height: 200,
                            borderWidth: 1,
                            borderColor: '#dddddd',
                            borderStyle: 'solid'
                        }}
                ></TextInput>
                <div>&nbsp;&nbsp;&nbsp;&nbsp;</div>
                <button onClick = {() => doPay()}
                        style={{
                            width: 160,
                            height: 40,
                            backgroundColor: 'grey',
                            color: 'white',
                            fontSize: 8
                        }}  
                >点击付款</button>
            </div>
            
        </div>
    </View>
  );
}

export default Bussiness;