分类：技术

uni-app项目调试

调试uni-app项目

1、浏览器项目调试

uni-app支持多个端同时调试，调试之前我们首先要配置一下浏览器的安装路径，默认HBuilder是检测不到的。点击【运行】->【运行到浏览器】->【配置web服务器】

在这里需要注意的是:你要在那种浏览器上调试，就将你要调试的浏览器的安装路径粘贴到对应的框中。然后就可以点击>>运行>>运行到浏览器>>选择你要运行的浏览器。就可以调试了。

2、手机真机调试

真机调试第一步需要安装真机调试插件，点击“运行”>>“运行到手机”>>“下载真机调试插件”，等待安装完成。

需要注意的是，对于安卓手机，需要在手机上开启开发者模式才能进行调试。打开手机【设置】>> 【关于本机】，找到【软件版本】，连续点击五次，就可以开启开发者选项。

进入打开【USB调试】，插上数据线连接手机，就会自动打开开发者选项列表，找到【设置】 >> 【高级设置】>> 【开发者选项】，如下：

完成以上步骤就正常使用真机调试了。

在操作的过程中可能会遇到中途需要进行一次授权，点击确认就可以了，授权成功后你的手机上会安装一个HBuilder app，之后在开发环境开发的所有内容都会在app中显示。

iphone手机相比安卓手机来说简单一些，连接手机后直接运行，但是，他会报错，需要在手机里面进行设置。如下：

【设置】>> 【通用】>> 【设备管理】,信任一下HBuilder即可。

3、小程序调试：

Uni-app小程序的调试使用的是微信开发者工具，如果你是第一次使用，需要在小程序的运行配置中进行配置微信开发者工具的路径。

点击【运行】 >> 【运行到小程序模拟器】>> 【运行设置】

以上运行配置完成之后，在HBuilder中点击【运行】 >> 【运行到小程序模拟器】>> 【运行需要调试的项目】，就可以在微信开发者工具上运行我们的项目了。

使用微信开发者工具的时候需要注意两个点:

1）微信开发者工具必须是官方最新版。

2）微信开发者工具需要授权。

完成以上步骤之后，就可以运行uniapp项目了，但是在编译的时候还会报一种错

报错原因：“我们不是开发者”，需要进行开发者设置。

解决方法是前往微信公众平台，登录小程序账号。

登陆官网地址：https://mp.weixin.qq.com/

登录之后进行如下操作:

第一步:联系管理员，因为只有管理员才有权限分配开发者权限。

第二步:管理>>成员管理>>点击【添加成员】，注意这里只有管理员的界面才有“添加成员”这一选项，普通开发者是没有这一选项的。

第三步: 新增成员微信号并勾选权限。

第四步:管理员扫描二维码

管理员完成以上步骤开发者就可以正常调试程序了。

还有一种方法就是使用小程序账号登录微信公众平台，在开发>>开发设置中，复制appid。

在HBuilderX中找到需要调试的项目，将复制的appid粘贴到下面标注的框中。

只要确定两个地方的appid一致，开发者就可以正常调试程序了。

2022年12月6日

可视化uniapp 自动生成代码，组件、模板拖拽布局，导出整套代码

免费使用可视化uniapp 自动生成代码项目，两个工具，如下：

一，工具一
1.可视化拖拽表单，基础组件、模板组件,自动生成布局
2.自定义修改组件的内容和组件的样式
3,可以保存你修改后的内容，保存你的设计
4.一键导出项目全部代码，可以直接运行
5.查看导出代码的历史记录，可以继续编辑
6.查看源码可以看到修改后的样式自动变化
7.可视化创建vue文件，选中文件把代码保存在vue文件中
8.多个vue页面uniapp代码同时导出
9.自动生成路由配置，可以实现vue页面之间的跳转

hbuilderX开发工具可以把 uniapp 生成H5 网页、小程序、安卓、苹果

注意：修改设计好要保存到vue文件里

免费生成代码，自动布局，更改组件属性值

该项目后续慢慢更新，

代码演示示例：

<template>
 
  <!-- 页面全局配置 -->
  <view class="pageconfig">
 
    <!--按钮0的布局样式-->
         <view class=" commoncss0">
         <view class="flex flex-wrap justify-around " style="flex-direction: row;">
         <button  v-for="(item,index) in label0List" class="cu-btn  margin-xs   round  bg-green flex-sub">{{item.btnname}}</button>
         </view>
         </view>
         
         <!--宫格组件1的布局样式-->
         <view class=" bg-cyan label1 commoncss1 cu-list grid col-5 no-border">
         <view class="cu-item" v-for="(item,index) in label1List" :key="index">
         <view>
         <image :src="item.pic" style="width: 70rpx;height:70rpx;"></image>
         </view>
         <text  style="font-size: unset;color: unset;">{{item.name}}</text>
         </view>
         </view>
         
         <!--进度条2的布局样式-->
         <view class=" commoncss2">
         <view class="cu-progress  round active round striped ">
         <view class="bg-cyan" style="width:71%">71%</view>
         </view>
         </view>
         
         <!--vuetag-->
 
  </view>
</template>
 
 
<script>
 
/**    author:Mr.yang    **/
/**    qq:987095529   **/
/**    wx:wx987095529   **/
 
import {
  mapState
} from 'vuex'
export default {
  data() {
    return {
      noMore:false,
      /**single**/
 
      label0List :[{"btnname":"按钮1","color":"red","islou":"","isblock":"1","iconcolor":"blue","iconname":"","background":"green"},{"btnname":"按钮2","color":"red","islou":"","isblock":"1","iconcolor":"blue","iconname":"","background":"green"},{"btnname":"按钮3","color":"red","islou":"","isblock":"1","iconcolor":"blue","iconname":"","background":"green"}],
label1List :[{"id":645,"gid":54,"add_time":1634719515,"sort":11,"status":1,"name":"发票管理","pic":"https:\/\/shitangsys.cntdh.net\/\/uploads\/store\/comment\/20220410\/51302f9e797bf89e5917300f54f3a5c2.jpg","url":"\/pages\/users\/user_invoice_list\/index","image":"https:\/\/shitangsys.cntdh.net\/\/uploads\/store\/comment\/20220410\/51302f9e797bf89e5917300f54f3a5c2.jpg"},{"id":647,"gid":54,"add_time":1634719515,"sort":9,"status":1,"name":"联系客服","pic":"https:\/\/demo43.wuht.net\/uploads\/attach\/2021\/09\/20210923\/855a5e9a3f2f6e14c207bc98c54118eb.png","url":"\/pages\/customer_list\/chat"},{"id":648,"gid":54,"add_time":1634719515,"sort":8,"status":1,"name":"优惠券","pic":"https:\/\/demo43.wuht.net\/uploads\/attach\/2021\/09\/20210923\/705286c880d505cd7587dd2c3533ed73.png","url":"\/pages\/users\/user_coupon\/index"},{"id":649,"gid":54,"add_time":1634719515,"sort":7,"status":1,"name":"我的收藏","pic":"https:\/\/demo43.wuht.net\/uploads\/attach\/2021\/09\/20210923\/eb4a2195830194d18e26c92208b42acf.png","url":"\/pages\/users\/user_goods_collection\/index"},{"id":650,"gid":54,"add_time":1634719515,"sort":6,"status":1,"name":"地址信息","pic":"https:\/\/demo43.wuht.net\/uploads\/attach\/2021\/09\/20210923\/a95f58dd94ccf8052b4c04c73a23a46c.png","url":"\/pages\/users\/user_address_list\/index"},{"id":651,"gid":54,"add_time":1634719515,"sort":5,"status":1,"name":"我的余额","pic":"https:\/\/demo43.wuht.net\/uploads\/attach\/2021\/09\/20210923\/87804b5b967d2d5c66e9d1b86c744b4d.png","url":"\/pages\/users\/user_money\/index"}],
label2List :[],
/**vuejs**/
         
         
         
      incomeList:[]
    };
  },
  onLoad() {
 
  },
  methods:{
     /**
     *          $vuetag = "";
     *          $vuecss = "";
     *          $vuejs = "";
     *
     */
    /**method**/
    //获取数据
 
  }
}
</script>
 
<style lang="less">
 
 
/**
 *   此处必须引用colorui样式,并放入根目录，css样式可以这样写
	@import "colorui/main.css";
	@import "colorui/icon.css";
 如需要引用colorui到全局，
 需要在App.vue 引入
 	@import "colorui/main.css";
	@import "colorui/icon.css";
 *
 */
 
 
page{
  background-color: #F8F9FB;
}
 
 
 	
	/**本页全局配置的代码**/
.pageconfig 
{
		width:  100%;
		height:  100vh;
		overflow:  hidden;
		overflow-y:  scroll;
}
 
 
 
 /**pagedomcss**/
 
 
 	
	/**本页按钮0的css代码**/
.commoncss0 
{
		font-size: 26rpx;
}
	
	/**本页宫格组件1的css代码**/
.commoncss1 
{
		font-size: 26rpx;
}
	
	/**本页进度条2的css代码**/
.commoncss2 
{
		font-size: 26rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
}
/**vuecss**/
 
 
 
 
 
 
</style>

拖拽组件可以完成布局

1，拖拽生成代码，可视化设置属性，自动生成uniapp代码

链接地址为：

http://119.91.145.229:8011/admin/bigdata2

二，工具二

十大特性

1.可视化,自由拖拽,推导出flex布局,尽可能兼容多端(h5,微信小程序)

2.支持uviewui内置所有图标,也可以使用阿里图标库160万+图标(需填写网络路径)

3.支持在遮罩mask,弹窗Popup,modal 等组件,直接拖拽,绘制

4.对于常用的表单组件,可直接帮你生成相关事件,时间,单列多列等选择器等支持数据回显功能(免开发)– 在拖拽面板中的(formitem 表单项中)

5.右键菜单,二十几种对齐方式,支持单选多选,单行弹性对齐

6.集成网络上用于解压的趣味聊天室

7.开发者,可自由创作布局,然后上传(共享给其他开发人员使用)

8.支持简单事件代码片段

9.支持绑定变量(对象格式,对象数组格式(下标要从0开始)),直接在vue中生成相关格式的数据

10.支持免费cdn图床,可在项目中直接使用

部分操作(一套代码,h5端和微信端通用,其他没有测试):

uniapp页面速成提效工具：
uniapp uview ui 可视化,完全自由拖拽,一键生成flex代码网站:
http://aicode.shagua.wiki/uni/index.html#/

2022年12月5日

关于Mac升级后无法打开axure 8软件的问题解决

手贱升级了mbp的10.15版本，结构发现工作需要的axure打不开了，开始网上各种搜索，结果大部分都是让安装axure 9，于是在网上找了pj版的装上了，嗯，果然可以使用了。可是好景不长，突然发现axure 9以上的版本不再支持团队协作里的内部svn模式了，改成自己的axure clound了，这下可怎么办？工作中还是需要使用自己内部的svn服务器来进行团队合作的，于是乎又开始各种搜索，又在一篇帖子中看到要安装axure 8官方版就可以正常使用，便又开始安装官方的axure 8的最新版本，果然可以正常使用，接下来就是注册码和汉化了，现已经全部处理完成。处理软件的适配问题真的很耗时，不过还好解决掉了。

接下来就好好用它来工作了。

接下来附上软件的相关工具包

Axure RP 8.1正式版下载地址安装和汉化说明

axure rp 8 官网最新版本及汉化https://www.axure.com.cn/3510/

注册码：https://blog.csdn.net/qq_24531461/article/details/81561758

汉化：https://www.axureshop.com/a/1539625.html

软件授权

打开软件输入注册码，开始使用吧！Axure RP 8.0可以免费试用30天，超过试用期需要有授权码才能继续使用。

点击购买正版授权>>

序列号请见下方：

1.亲测有效
Licensee：www.jb51.net
Key：1Tjde3V1zSfNd430PD8o/hSvynvV8mjbg6bRbzN1U6B6BU1UcuEUFownErIWvA0X

2.亲测8.0以下版本有效
zdfans.com
gP5uuK2gH+iIVO3YFZwoKyxAdHpXRGNnZWN8Obntqv7++FF3pAz7dTu8B61ySxli

3.Team Edition（团队版）
Licensee：www.jb51.net
Key：smn/B4H9oFf30K6sLW36LaTs11yoKk5p616FpnyGdbtTum95cKLanzezWL6EZOOA

4.Enterprise Edition（企业版）
Licensee：www.jb51.net
Key：PfIjTySgSBZei/AM49Wsl/OXbAzPBegmTxQWNxGt+/VKKkbOI0VzxlKmpnpVYIIg

2022年12月2日
解决MAC电脑无法安装Axure的问题
众所周知，苹果电脑的操作系统和Windows在操作使用上还是有很大差别的，在工作中经常遇到新手使用Mac电脑在安装和使用Axure时遇到各种问题，我们来一起看下我是如何解决的吧！

1、下载了安装包不会安装

如下图，mac的安装包一般是.dmg

双击「AxureRP-Setup-3727.dmg」

显示这样的弹出窗口，然后将将Axure RP9 文件拖到Applications文件夹中，就完成了安装，是不是很简单
注：”Applications文件夹“就是应用程序移入就是安装，从应用程序删除就是卸载了

2、安装了之后提示“Axure RP9已损坏，无法打开，你应该将它移到废纸篓”

-为什么会出现？
苹果默认是只允许安装自家【App Store】来源的应用，如果你想安装第三方的应用，那么需要在【系统偏好设置 -> 安全性与隐私 -> 通用】中勾选【App Store 和被认可的开发者】选项。而被认可的开发者是需要购买苹果的企业证书对应用进行签名，然后再提交给苹果审核才可以，这对破解应用来说很不现实，因为破解应用必定会修改应用的文件从而导致签名失效而运行显示【已损坏】。另外一些开源免费类应用没有收益（用户主动打赏太难了），所以开发者一般也不会购买证书签名。
解决方法就是去开启【任何来源】选项了，但是 macOS 默认是隐藏了这个设置的，需要用户手动通过终端执行命令行代码来开启。
1、先打开系统偏好设置 -> 安全与隐私 -> 通用选项卡，检查是否已经启用了任何来源选项。

如果没有这个选项，复制以下面的命令：
```
sudo spctl --master-disable
```
打开终端：

将刚刚复制的命令粘贴到终端中。

然后按下键盘的回车键（return）

输入密码

恭喜您，您已成功开启任何来源。
2022年12月1日

uni-app 条形码(一维码)/二维码生成实现

组件推荐

我们在用 uni-app 开发前端时，有时会用到条形码或者二维码，甚至一个页面同时用到条形码和二维码。笔者推荐使用以下两个组件：

uni-app 条形码生成器：barcode 源码和文档说明
uni-app 二维码生成器：qrcode 源码和文档说明

不过，有点小小的遗憾，这两个组件存在一些不完美的地方。笔者进行了一些优化，并修复了在支付宝小程序中使用无法刷新条形码的问题。大家也可以直接下载笔者优化后的文件（uniapp条形码和二维码生成器.zip），解压后（条形码：tki-barcode、二维码：tki-qrcode）放在 components 文件夹下。

使用方式

自定义组件

自定义一个组件，代码如下：

<template>
    <view class="component text-center">
        <view class="component-title">条形码和二维码混用</view>
        <view class="component-code">
            <tki-barcode
                ref="barcode"
                onval
                :val="code"
                :load-make="true"
                :opations="barOpations"/>
        </view>
        <view class="component-qr">
            <tki-qrcode
                ref="qrcode"
                onval
                :val="code"
                :size="250"
                :load-make="true"
                :show-loading="false"/>
        </view>
        <view class="coupon-no-view">
            <text>编号：</text>
            <text class="coupon-no">{{ code }}</text>
        </view>
    </view>
</template>

<script>
    import tkiBarcode from '@/components/tki-barcode/tki-barcode'
    import tkiQrcode from '@/components/tki-qrcode/tki-qrcode'
    
    export default {
        components: {
            tkiBarcode,
            tkiQrcode
        },
        data() {
            return {
                code: '',
                barOpations: {
                    height: 150,
                    displayValue: false
                }
            }
        },
        methods: {
            init () {
                this.code = '1234567890' // 生成一维码和二维码
                setTimeout(() => {
                    this.code = '0987654321' // 5 秒后刷新一维码和二维码
                }, 5000)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .component {
        border-radius: 16rpx;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background: #FFFFFF;
        flex: 1;
        margin: 64rpx;
        padding: 64rpx 32rpx;
        &-title {
            max-height: 112rpx;
            font-size: 40rpx;
            font-weight: 600;
            line-height: 56rpx;
            overflow: hidden;
        }
        &-code {
            height: 150rpx;
            margin: 32rpx 32rpx 0;
        }
        &-qr {
            height: 250rpx;
            margin-top: 36rpx;
        }
        .coupon-no-view {
            margin: 0 18rpx;
            height: 76rpx;
            border-radius: 8rpx;
            border: 2px solid #F5F5F5;
            display: flex;
            align-items: center;
            padding: 0 24rpx;
            margin-top: 36rpx;
            text {
                font-size: 24rpx;
                font-weight: 400;
                &:first-child {
                    color: #999999;
                }
            }
            .coupon-no {
                flex: 1;
                text-align: left;
            }
        }
    }
</style>

使用自定义组件

在需要使用这个组件的地方引入使用，并在 onLoad 或其他需要使用一维码/二维码的方法中直接调用 init，如下：

export default {
    onLoad(option){
        this.$nextTick(() => {
            this.$refs['code'].init()
        })
    }
}

最终效果图如下：

版权属于：瞭月

本文链接：https://www.lervor.com/archives/113/

2022年11月29日

uni-app 页面应用内跳转与应用外跳转的实现方式

我们在用 uni-app 开发前端应用时，页面跳转是必不可少的。页面跳转主要包含应用内跳转（站内跳转）和应用外跳转（外部跳转）。下面我们一起来看看具体实现方式。

站内跳转

站内跳转主要有两种实现方式，可以通过组件和 API 接口方式实现。

采用 navigator 组件

<template>
    <view>
        <navigator url="/pages/view/view?id=1" open-type="navigate">
            <button type="default">跳转到新页面</button>
        </navigator>
    </view>
</template>

采用 API 接口

<template>
    <view>
        <button type="default" @tap="toView">跳转到新页面</button>
    </view>
</template>

<script>
    export default {
        methods: {
            toView () {
                uni.navigateTo({
                    url: '/pages/view/view?id=1'
                })
            }
        }
    }
</script>

open-type 主要有效值与 API 的对应关系

值	对应 API	说明
navigate	uni.navigateTo	保留当前页面，跳转到应用内的某个页面
redirect	uni.redirectTo	关闭当前页面，跳转到应用内的某个页面
switchTab	uni.switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch	uni.reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	uni.navigateBack	关闭当前页面，返回上一页面或多级页面

更多规则可查看：官方文档

目标页面参数接收：

<script>
    export default {
        onLoad: function (option) { // option为object类型，会序列化上个页面传递的参数
            console.log(option.id) // 打印出上个页面传递的参数。
        }
    }
</script>

外部跳转

外部跳转直接可以使用 web-view 组件，会自动铺满整个页面。

步骤1：在项目根路径下的 pages 目录下，新建一个页面，用于专门放置外部网站

<template>
    <web-view :src="url"></web-view>
</template>
 
<script>
    export default {
        data() {
            return {
                url: null  //要打开的外部链接
            }
        },
        onLoad: function (option) {
            this.url = option.url
        }
    }
</script>

步骤2：配置 pages.json

{
    "pages": [
        ……,
        {
            "path": "pages/web-view/web-view",
                "style": {
                    "navigationBarTitleText": "页面标题"
                }
            }
        }
    ]
}

步骤3：在需要跳转的页面，通过 navigator 组件或 API 进行跳转

<template>
    <view>
        <navigator url="/pages/web-view/web-view?url=https://www.baidu.com/">访问百度</navigator>
    </view>
</template>

2022年11月29日

uniapp切换页面,uniapp跳转到外部链接

uni-app页面跳转

刚做了一个uni-app的项目，在这总结一下跳转和传递数据

uni.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

参数
例子uni.navigateTo({ url: ‘test?id=1&name=uniapp’ /*这是跳转到的页面路径，？id=1这些都是传递的数据，可以直接在test页面接受});

接受数据代码如下：onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数 console.log(option.id); //打印出上个页面传递的参数。 console.log(option.name); //打印出上个页面传递的参数。 }

uni.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

参数
例子uni.redirectTo({ url: ‘test?id=1’});

uni.reLaunch(OBJECT)

关闭所有页面，打开到应用内的某个页面。

参数
例子uni.reLaunch({ url: ‘test?id=1’});

uni.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

参数
例子
pages.json{ “tabBar”: { “list”: [{ “pagePath”: “pages/index/index”, “text”: “首页” },{ “pagePath”: “pages/other/other”, “text”: “其他” }] }}

other.vueuni.switchTab({ url: ‘/pages/index/index’});

uni.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

参数
例子// 此处是A页面uni.navigateTo({ url: ‘B?id=1’});// 此处是B页面uni.navigateTo({ url: ‘C?id=1’});// 在C页面内 navigateBack，将返回A页面uni.navigateBack({ delta: 2});

官网地址uni-app传参

uni.setStorageSync(KEY,DATA)
将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
可以直接将需要传递的数据本地存储起来，但是这种方法有很多弊端，只有在适合的情况下才能使用

参数
例子try { uni.setStorageSync(‘storage_key’, ‘hello’);}

链接传参

这个方法用的比较多，直接在跳转到的链接后边加？传递的数据，上边也提到过。

例子

1.传递数字，字母等固定的值uni.navigateTo({url:’页面路径?id=1′ }) /*****接收数据*****/ 在跳转到的页面下 onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数 console.log(option.id); //打印出上个页面传递的参数。 }

2.传递变量uni.navigateTo({url:’页面路径?id= this.id’})

接收数据的方法都一样。快三稳赚10大技巧面uni.navigateTo({ url: ‘B?id=1’});// 此处是B页面uni.navigateTo({ url: ‘C?id=1’});// 在C页面内 navigateBack，将返回A页面uni.navigateBack({ delta: 2});

官网地址uni-app传参

uni.setStorageSync(KEY,DATA)
将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
可以直接将需要传递的数据本地存储起来，但是这种方法有很多弊端，只有在适合的情况下才能使用

参数
例子try { uni.setStorageSync(‘storage_key’, ‘hello’);}

链接传参

这个方法用的比较多，直接在跳转到的链接后边加？传递的数据，上边也提到过。

例子

1.传递数字，字母等固定的值uni.navigateTo({url:’页面路径?id=1′ }) /*****接收数据*****/ 在跳转到的页面下 onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数 console.log(option.id); //打印出上个页面传递的参数。 }

2.传递变量uni.navigateTo({url:’页面路径?id= this.id’})

接收数据的方法都一样。

2022年11月29日
Axure嵌入GIS地图
Axure做原型时也会常引用Gis地图。常规的方法是通过内联框架元件调用公网地图，但是这种方式样式下的地图内容都无法修改。本文以高德为例介绍如何通过javascript注入实现Axure自定义Gis地图的嵌入。

1、地图构建

打开高德地图API官网，由于通过js注入的方式进行嵌入。所以选取了异常加载地图方式，这样加载可以更加顺畅。示例地址https://lbs.amap.com/demo/javascript-api/example/map-lifecycle/asynchronous-loading-map ，可以在此基础上加上想要的功能。

2、Axure 引用

2.1 创建容器

在axure界面里拖入矩形，作为地图容器，并命名为“container” （可以自己定义名称，但要与javascript代码【data-label】里的值保持一致)。

2.2 javascript注入

2.2.1 增加交互事件
增加交互事件，【载入时】打开链接，【超链接到】写入javascript 的代码实现Gis的引用，如下图

2.2.2 javascrit代码写入
a 准备代码
编辑框加入
```
javascript: var dom =$('[data-label=container]').attr('id'); 
```
b 地图代码
然后复制高德地图的代码复制进去，修改高德key值,修改方式可以参考https://lbs.amap.com/api/javascript-api/guide/abc/prepare
```
javascript:
var dom =$('[data-label=container]').attr('id');
/*高德地图的代码*/
    function onApiLoaded(){
        var map = new AMap.Map(dom , {
            center: [117.000923, 36.675807],
            zoom: 6
        });
        map.plugin(["AMap.ToolBar"], function() {
            map.addControl(new AMap.ToolBar());
        });
    }
     var url = 'https://webapi.amap.com/maps?v=1.4.15&key=你的key&callback=onApiLoaded';
    var jsapi = document.createElement('script');
    jsapi.charset = 'utf-8';
    jsapi.src = url;
    document.head.appendChild(jsapi);
```
c 简化代码
```
javascript:
var dom ==axure("@container").().attr('id');
/*高德地图的代码*/
    function onApiLoaded(){
        var map = new AMap.Map(dom , {
            center: [117.000923, 36.675807],
            zoom: 6
        });
        map.plugin(["AMap.ToolBar"], function() {
            map.addControl(new AMap.ToolBar());
        });
    }
$axure.utils.loadJS('https://webapi.amap.com/maps?v=1.4.15&key=你的key&callback=onApiLoaded');
```
通过Axure内置的加载JS函数，减少动态加载JS部分的代码。$axure.utils.loadJS(url)函数说明参考Axure 加载js、css文件www.sima.link/axure-api-load-js-css/

2.3 效果

点击预览调用chrome浏览器查看效果

转载知乎：https://zhuanlan.zhihu.com/p/543176914
2022年11月29日
Axure实例：login登录页面用户名密码校验
1. 制作两个页面1-登录页面，2-登录成功页面
1、登录页面

用户名输入框的类型为“text”，设置文本框名称为“用户名”（设置名称方便快速找到元件）

密码输入框的类型选择“密码”，设置文本框名称为“密码”（设置名称方便快速找到元件）

另外还要有一个错误提示的文本框，名称设为“提示框”

2、登录成功页面

简单做个，不同的界面就可以了。（界面是丑了点，但是不重要，我们主要看逻辑）

二、开始我们的逻辑校验

预设的账号密码和校验情况

1、用户名和密码都为空, 提示“请填写用户名和密码”

给【登录】按钮添加单击事件

点击【添加条件】

设置条件“用户名”和“密码”都为空

注：

（1）“用户名”、“密码”就是一开始设置的用户名、密码框的名称

（2）“==”就是等于的意思

（3）空就什么都不填写

（4）左上角的“符合”选择全部，全部就是同时满足的意思

设置完成点击【确定】即可

条件设置完成后，我们需要设置满足该条件的校验提示，就是设置提示框的文字

点击【设置文本】，勾选名称为“提示框”元件，设置值为“请填写用户名和密码”

好了，看效果

2、用户名为空，提示“请填写用户名”

双击事件【鼠标单击时】，注意这边变成了Case2了

还是点击【添加条件】进行判断条件的设置

注：“用户名”选择了==空，“密码”选择了!=空

条件完成后，我们还是设置“提示框”文本的值达到提示效果

好了，看效果

3、密码为空，提示“请填写密码”

和用户名为空的判断基本相同，不做过多说明了，参照下图

看效果

4、用户名和密码都错误，提示“用户名和密码错误”

双击事件【鼠标单击时】

设置条件

设置满足条件的提示文本框的值

好了，看效果

5、用户名错误，提示“用户名错误”

添加条件

设置满足条件提示框的值

好了，看效果

6、密码错误，提示“密码错误”

添加条件

设置提示框的值

好了，看效果

7、用户名和密码都正确，进入登录成功页面

添加条件

设置满足条件后跳转至成功界面

点击打开链接—》当前窗口—》选择成功页面—》点击链接到

好了，看效果

输入正确的用户名密码

可以跳转成功界面拉

大功告成！

一直以来想写一些Axure方面的教程，不知道从哪里入手。结合新人时期自己的一些迷茫与渴求，最后决定做Axure的实例教程。后期如果有一些朋友留言或者私信需要具体功能实例的话，我会优先做，如果没有的话，还是按照自己的所想来吧

转载：https://zhuanlan.zhihu.com/p/129445077?utm_id=0
2022年11月29日
axure导出html移动设备,如何适配不同分辨率的手机？

前言：以下方法可以做基本的实现，实现方法：1，背景做适配；2，中间内容组合成动态面板居中展示，但是中间内容需要做类似手机的宽度大小，否则则不能实现适配，除非分解中间内容。

一、移动端简单原型设计

先来设计一个简单的移动端的原型，上边一个标题栏，中间同内容，底端是一个菜单栏。省略

二、移动端原型预览，省略

三、修改发布参数

要修改发布时的参数，让导出的页面能自动识别出是在手机上访问。按下F8键，选择“移动设备”，只需要勾选“包含视口标签”，单击“生成”按钮：如下图所示

手机浏览器打开后，发现有问题，右边为空，下边也不适配；

四、手机屏幕分辨率适配思路

(1)标题栏和菜单栏宽度并没有和屏幕宽度一致的问题

思路：我们并不知道每个手机的屏幕大小是多少，但是Axure里有函数可以获得浏览器窗口的宽度，因此只要在原型页面加载完成时，设置一下标题栏和菜单栏的宽度和窗口宽度大小一样不就行了吗？

选择当前页面，双击“页面载入时”添加事件处理：

这样在页面加载完成时，就会设置标题栏和菜单栏和屏幕宽度一致了，注意同时勾选title和menu，宽度都设置为“[[Window.width]]”。【高度可设置为“[[Window.height]]”，如果不覆盖底部或者说加上的底部的高度等于整个浏览器的高度，那么高度表达式为： “[[Window.height-60]]” 。如果页面要全部固定适配手机，无需滑动，则需要设置高度和宽度自适应。】

(2)内容部分也没有在屏幕上水平居中显示

思路：我们将内容部分当作一个整体，在页面加载完成后，将内容移动到屏幕水平中面位置。

选择除标题栏和菜单栏外的内容部分，右键转换为动态面板，命名为main：

【顶部和底部，包括中间的内容动态面板，X纵向为0】

编辑前面的页面加载事件，移动动态面板main的绝对位置到屏幕水平中央位置，y位置不变，计算公式=(窗口宽度-动态面板宽度)/2，最终的表达式为“[[(Window.width-LVAR1.width)/2]]”，注意这里使用到局部变量表示动态面板：

其中Y，可以设置中间内容的与顶部的间隙高度；67fx（自定义都可）

(3)菜单栏没有在屏幕的底端

我们能取到窗口的高度，因此我们计算出菜单栏在屏幕上的位置。

【Axure】如何让导航栏固定到浏览器底部或顶部？（已解决，图文教你）

1，设置底部菜单（TABAR）的尺寸，如上；

2，设置底部菜单（TABAR）为动态面板，然后进行下面的设置，如下图：

【下面的内容没有实现过，作为研究之用，说不定有新的方法】

具体位置=屏幕的高度-菜单栏的高度，最终表达式为“[[Window.height-LVAR1.height]]”，将菜单栏移动到这个位置即可，注意这里同样使用到了局部变量表示菜单栏：

五、最终预览效果

中间内容置中，顶部和底部全宽屏适配，但是底部菜单TABBAR的浮动没有实现，待研究，或参考中间插入的方法，不断尝试！

其他同类参考：

https://blog.csdn.net/weixin_35000379/article/details/112998227

https://blog.csdn.net/weixin_35501678/article/details/118412339

https://blog.csdn.net/dxnn520/article/details/115249264

2022年11月22日
吊炸天——74款APP完整源码

吊炸天！74款APP完整源码！（安卓+IOS）

收集这74款APP源码真的是殚精竭虑，呕心沥血呀！哈哈

WeChat高仿微信 https://github.com/motianhuo/wechat
高仿微信，实现功能有：好友之间文字聊天，表情，视频通话，语音，语音电话，发送文件等。

知乎专栏App https://github.com/bxbxbai/ZhuanLan
第三方的app，引用作者的描述：“最近一直在利用空余时间开发一个完整的App，名字就叫“专栏”。开发这个App的目的主要是为了练练手，熟悉开发一个完整App的流程。就像造房子，亲手打地基，搬砖头，垒砖头，还自己装修（虽然装修的不好看）”

GankMeizhi https://github.com/xingrz/GankMeizhi
没错。又是一个妹子图app，依然采集自干货集中营。

Meizhi https://github.com/drakeet/Meizhi
一个妹子图项目。通过这个项目，你可能可以学习到的内容有：多渠道打包使用 ORM 快速操作数据库访问网络，简单解析 HTML RecyclerView 瀑布流的使用 RecyclerView 底部加载更多的简单实现 Material Design 的下拉刷新使用最新的 Design 兼容库使用 5.0 的 Share 组件或元素动画使用 Toolbar 完全替代 ActionBar

JianDan https://github.com/ZhaoKaiQiang/JianDan
高仿煎蛋的app，数据是采用抓包分析出煎蛋的api，离线缓存使用GreenDao实现本地Sqlite缓存。 ps ：煎蛋是一个2b青年聚集地。

WeGit https://github.com/Leaking/WeGit

SimplifyReader https://github.com/SkillCollege/SimplifyReader
一款基于Google Material Design设计开发的Android客户端，包括新闻简读，图片浏览，视频爽看，音乐轻听以及二维码扫描五个子模块。项目采取的是MVP架构开发，由于还是摸索阶段，可能不是很规范。但基本上应该是这么个套路

StickerCamera https://github.com/Skykai521/StickerCamera
这是一款集成了相机,图片裁剪,给图片贴贴图打标签的APP。编译需要java8

验证码助手 SmsCodeHelper https://github.com/drakeet/SmsCodeHelper
是由原「贝壳单词」团队开发的一款新的开源轻App. 它可以在手机接收到验证码短信的时候，自动浮现验证码，并自动复制验证码到用户的剪切板。当用户接收到短信验证码，只要长按验证码的输入框，粘贴验证码即可。

Notes-开源记事本应用 https://github.com/lguipeng/Notes
一款基于Material Design 的开源笔记本应用,Material Design风格，采用抽屉式菜单，悬浮滑动按钮，点击控件时的水波纹效果，状态栏透明使得与应用融为一体，用户即使在Android L系统以下的手机也能感受到良好的用户体验用文字记录身边随时发生的事情，或者你的待办事项同步，同步需要你在手机设置里面添加一个邮箱，并作为你的同步账号，提交到服务器

Hubble Gallery https://github.com/derekcsm/hubble_gallery
一个显示哈勃拍摄的太空照片的相册类app，该项目使用了ObservableScrollView，road-trip等著名的库，很适合学习。

BiliClient https://github.com/android-cjj/BiliClient
仿bilibili客户端，喜欢动漫的进。

V2EX社区客户端 https://github.com/greatyao/v2ex-android/
V2EX社区客户端，非官方。

Remindly https://github.com/blanyal/Remindly
Remindly 是一个简单的用户友好的提醒应用。特点：Material 风格，可以设置重复提醒，按小时，按天按周，按月。

Launcher3 https://github.com/fookwood/Launcher3
很老的项目了，更改官方的Launcher3使得可以在eclipse编译 targetSdkVersion 必须是19 (之前说的有错误) 如果修改AndroidManifest.xml后有错误，project -> clean 作者配有相关的分析文章。

superCleanMaster https://github.com/joyoyao/superCleanMaster
一键清理开源版，包括内存加速，缓存清理，自启管理，软件管理等。

BlackLight https://github.com/PaperAirplane-Dev-Team/BlackLight
BlackLight 是由纸飞机开发团队开发的一款Android上的新浪微博第三方轻量级客户端。没有任何商业化的因素，没有广告(新浪友情插入的除外)，是一个最纯净的新浪微博客户端。

Sky31Radio https://github.com/linroid/Sky31Radio
一个开源的校园电台app，一款学院风的电台节目。可以学习，不过因为是校园的东西，服务端说不定哪天说没就没了。

cut_the_rope_type_game
切绳子的游戏，流畅度不错，还可以学习关卡的实现方法，对于我这种只涉及过普通应用开发的人来讲，足够有吸引力了。github上的代码需要去掉google广告的代码才能运行（或者引入相关的google的广告包）。本站下载链接中是我去掉了广告的版本。

Catlog
查看logcat的app

Material-Movies
material design风格的电影应用，这个应用的目的其实是为了讲解作者一篇文章中所描述的一种编程模式

WayHoo
“本应用是以变形金刚作为主题元素的实用型Android天气软件，界面高仿雅虎天气，数据来自中国天气网！”

OpenLibra-Material
OpenLibra的一个客户端（非官方），演示了Material设计在真实应用中的使用，OpenLibra是西班牙的一个提供免费书籍下载的网站。建议用studio 编译

InstaMaterial
将概念设计在程序中实现的人是伟大的，作者将Instagram 的一组Material 风格的概念设计转变成了现实，非常有借鉴意义。包括水波效果 ListView的生动初始化效果，actionbar元素的进入效果，popmenu的动画效果等。5星级代码当之无愧。

Compass
本项目是MIUI指南针的社区开源版，由MIUI团队(www.miui.com) 发起并贡献第一批代码

Omni-Notes
功能相当完善的记事本app。包括记事分类，涂鸦、添加图片或者其他附件，日程提醒等记事本常用功能，可以在此基础上做二次开发，但需要遵守gpl协议。依赖了好几个库，又是studio开发的，新手编译起来可能比较吃力。

Smart-Note
一个很简单的记事本应用，只有添加和查看功能。适合初学者学习数据库的基本操作。

MaterialNotes
Material Design风格的笔记app，该项目需要依赖RoboGuice，floating-action-button，appcompat 两个项目，因此编译起来比较困难，不太适合初学者。

AnimeTaste(全球动画精选)
AnimeTaste（品赏艾尼莫）是国内首个关注独立动画的网站。移动版聚焦更新的全球独立动画的传播，让您随时随地能观看动画，分享快乐给更多好友。品味动画，重拾幻想。 AnimeTaste For Android，为全球动画爱好者所开发。

Faceless匿名聊天应用
匿名聊天应用，包括了android客户端以及服务端（php）的代码。

photoup 开源相册
photoup 是一款开源的相册类app，主要功能是将本地图片提交到facebook上去，虽然他的功能和facebook的远程服务相关，但是本身是可以被当作一款相册应用的，具有相册应用需要的绝大多数功能，可以很流畅的浏览相册，裁剪图片，缩放图片，图片的编辑；不仅如此，还带有人脸识别这种特色功能，如果我们能够吸收其中的知识，写一个自己的相册应用就得心应手了，因为从本地相册的角度去看，photoup 在用户体验上仍然是值得改进的，仍然值得我们去开发一款相册程序。

ZhihuPaper
一个「知乎日报」Android 客户端。经过了一段时间的开发，最初的设想已经全部完成：最新新闻、过往的新闻的展示下拉刷新数据新闻正文的展示（WebView的各种使用）正文中图片查看、保存至相册离线下载夜间模式收藏夹已读数据缓存内容分享至SNS

TTAndroidClient开源IM
一个适用于公司内部同事交流的开源im，该源码是由Teamtalk团队贡献，同时他们开源了其他配套的源码。因为该项目涉及到侵权已经被git下架。

v2ex-daily：v2ex网站的android客户端
v2ex是一个创意工作者交流的社区，里面也有很多的程序员，v2ex-daily是为v2ex开发的android客户端。可以在google play 上下载

Muzei Live Wallpaper for Android Muzei壁纸应用
这是已经在Playstore上线了的android壁纸应用，点击壁纸界面可以磨砂透明效果以及一般背景效果之间切换，可以自己指定背景图片的来源。最重要的他是开源的。有一点需要注意，这个项目使用了EventBus库。在Eclipse下整个项目要编译起来还是有点困难的。不妨试试Studio

MiCode/FileExplorer小米文件管理器开源版
小米文件管理器的开源版，这是一个完整的文件管理程序，虽然界面一般，但是功能相对完善，非常适合用来学习。

QuickNews新闻客户端
一个不错的新闻客户端，下载下来能用，是结合了很多开源项目制作的，值得新手参考下，数据也是通过网易和腾讯提供的。并提供一个APK下载地址大家可以下载下来看看，个人觉得还是很不错的，很多效果可以运用到自己的项目中去。

SeeWeather
就看天气——是一款遵循Material Design风格的只看天气的APP。无流氓权限，无自启，xxx，用最少的权限做最优的体验。

kickmaterial
一个为众筹网站kickstarter设计的安卓app，强调 Material Design，用来演示安卓开发的最新趋势。数据来自于模拟的api。

Memo
一款基于Google Material Design设计开发的Android密码管理客户端–怕死我的（PassWord）

React-Native-Gank
为Gank.io做的一个React-Native客户端

EasyGank
基于MVP模式 , RxJava+RxAndroid+Retrofit组合的干货集中营客户端。

CoCoin
CoCoin是一款记账APP，有记账、多种方式显示支出占比和支出变化、云同步、智能提醒等功能。

SimpleNews
基于Material Design和MVP的新闻客户端

JNote
一款支持部分Markdown语法的轻量级便签软件。

运行效果：

DoubanMovie-React-Native
React Native的豆瓣电影客户端。

RxWeather
这是一个简单的天气预报项目，目的是用来演示如何使用RxJava构造一个清晰的Android应用框架，并且加入了Rxbus。

plaid
Plaid是material design的演示app。它从Designer News, Dribbble 以及 Product Hunt中提取内容。

Hide-Music-Player
Hide音乐播放器。 1.0版主要特点摇一摇进入播放器, 下拉展开新视图（扫描音乐）, 音乐列表放大的动画, 进入页面的圆形动画, 滑动删除音乐, 更换主题颜色, 自定义的SwitchButton, 播放页面的模糊背景, 带指示器的自定义SeekBar, 通知栏显示音乐信息与关闭播放器

mr-mantou-android
又一个妹子app，之所以分享是因为里面有一个非常不错的pull-back-layout控件，可以下拉退出一个activity，然后这个activity里面的图片就能按照一定的动画回到列表的原有位置，觉得很赞。

GithubTrends
这是一个用来看查看 Github 热门项目的 Android App, 遵循 Material Design。 (https://github.com/trending) 支持订阅 50 多种编程语言，你可以在设置中添加/删除它们，并自定义它们的排序。支持 9 种颜色主题切换，支持收藏喜欢的项目。

githot
GitHot是一款帮助你寻找github上最流行开源项目的app。功能比较简单，就是列举了热门的项目和作者。不过里面用到了很多新技术RxJava，Dagger，retrofit等，作为学习材料还是不错的。

简诗
用传统中文的表达方式，把简单的生活记录成一首首美好的诗歌，一款笔记软件。

Timber
Material Design风格的音乐播放器，beta版本。

AnyShareOfAndroid
file transfer on android 仿茄子快传或者 360文件传输在局域网内（如果没有接收方建立热点，发送方接入热点），进行文件（发送方的app、图片等文件，项目中只是进行了手机中的第三方app和手机图片的）的传输。

AppPlus
App+是一个MD风格的用于传送、提取APK文件的开源工具软件。

Conquer
基于Material Design的todo应用。主要功能: 1.根据时间记录任务 2.定时提醒 3.云同步功能亮点功能：1.可与好友分享，互相监督 2.界面简洁精美，用户易操作 3.支持丰富内容，形式多样化。

ZhiHuDaily-React-Native
使用 React Native for Android 完成的知乎日报app。

ToolWizAppLock (密码锁)
一个密码锁应用，加密你的应用，照片，视频文件。在生活中，你有没有担心过手机里的某些应用被别人偷看，比如微信聊天记录、短信、照片？你是否担心一些重要图片，视频等重要资料被偷窥？有了密码锁，您只需将不想被别人查看的应用在我这里锁住，设置好密码，就可以高枕无忧了！您只需将重要的图片，视频等文件在我这里加密，再也不怕被别人窃取你的隐私了！

archi
演示和比较如何用不同的架构模式开发安卓app。同样的app使用传统的模式，MVP模式，MVVM模式开发了三次。

Clip-Stack（剪纸堆）
剪纸堆一个超轻量级剪贴板历史记录管理软件。

pocket-note-android
一个简单的记事本app，具有多色彩主题，自带日历视图，记事可以是列表显示也可以是网格显示，提醒功能，隐私保护功能等。

EWeightScale
一款可以记录和查询体重的应用，功能介绍如下支持体重数据的添加、删除、查询等功能动态生成体重曲线图，支持手势缩放实时计算BMI值，并进行诊断，给出健康体重范围

cut_the_rope_type_game

项目地址： https://github.com/kishordgupta/cut_the_rope_type_game

Catlog

项目地址： https://github.com/nolanlawson/Catlog

Material-Movies

项目地址： https://github.com/saulmm/Material-Movies

WayHoo

项目地址： https://github.com/way1989/WayHoo

OpenLibra-Material

项目地址： https://github.com/saulmm/OpenLibra-Material

InstaMaterial

项目地址： https://github.com/frogermcs/InstaMaterial

Compass

项目地址： https://github.com/MiCode/Compass

Omni-Notes

项目地址： https://github.com/federicoiosue/Omni-Notes

Smart-Note

项目地址： https://github.com/meadhikari/Smart-Note

MaterialNotes

项目地址： https://github.com/dan-zx/material-notes

AnimeTaste(全球动画精选)

项目地址： https://github.com/daimajia/AnimeTaste

Faceless匿名聊天应用

项目地址： https://github.com/delight-im/Faceless

photoup 开源相册

项目地址： https://github.com/chrisbanes/photup

ZhihuPaper

项目地址： https://github.com/cundong/ZhihuPaper

TTAndroidClient开源IM

项目地址： https://github.com/mogutt/TTAndroidClient

v2ex-daily：v2ex网站的android客户端

项目地址： https://github.com/kyze8439690/v2ex-daily-android

Muzei Live Wallpaper for Android Muzei壁纸应用

项目地址： https://github.com/romannurik/muzei

MiCode/FileExplorer小米文件管理器开源版

项目地址： https://github.com/MiCode/FileExplorer

QuickNews新闻客户端

项目地址： https://github.com/tigerguixh/QuickNews

SeeWeather

项目地址： https://github.com/xcc3641/SeeWeather

kickmaterial

项目地址： https://github.com/byoutline/kickmaterial

Memo

项目地址： https://github.com/yezhidong/Memo

React-Native-Gank

项目地址： https://github.com/Bob1993/React-Native-Gank

EasyGank

项目地址： https://github.com/CaMnter/EasyGank

CoCoin

项目地址： https://github.com/Nightonke/CoCoin

SimpleNews

项目地址： https://github.com/liuling07/SimpleNews

JNote

项目地址： https://github.com/Jhuster/JNote

DoubanMovie-React-Native

项目地址： https://github.com/fengjundev/DoubanMovie-React-Native

RxWeather

项目地址： https://github.com/SmartDengg/RxWeather

plaid

项目地址： https://github.com/nickbutcher/plaid

Hide-Music-Player

项目地址： https://github.com/w9xhc/Hide-Music-Player

mr-mantou-android

项目地址： https://github.com/oxoooo/mr-mantou-android

GithubTrends

项目地址： https://github.com/laowch/GithubTrends

githot

项目地址： https://github.com/andyiac/githot

简诗

项目地址： https://github.com/wingjay/jianshi

Timber

项目地址： https://github.com/naman14/Timber

AnyShareOfAndroid

项目地址： https://github.com/gpfduoduo/AnyShareOfAndroid

AppPlus

项目地址： https://github.com/maoruibin/AppPlus

Conquer

项目地址： https://github.com/hanks-zyh/Conquer

ZhiHuDaily-React-Native

项目地址： https://github.com/race604/ZhiHuDaily-React-Native

ToolWizAppLock (密码锁)

项目地址： https://github.com/Toolwiz/ToolWizAppLock

archi

项目地址： https://github.com/ivacf/archi

Clip-Stack(剪纸堆 )

项目地址： https://github.com/heruoxin/Clip-Stack

pocket-note-android

项目地址： https://github.com/channguyen/pocket-note-android

EWeightScale

项目地址： https://github.com/Jhuster/EWeightScale

2022年11月9日

uniapp 移动端嵌套H5使用swiper,swiper-item嵌套web-view组件滑动切换

<swiper style="z-index: 99999;" :current="swiperCurrent" @transition="transition"  
            @animationfinish="animationfinish" class="swiper">  
            <swiper-item class="swiper-item">  
                <web-view id="website-list" :webview-styles="webviewStyles" src="https://www.xxx.com">  
                </web-view>  
                <cover-view class="active">  
                    我是webView  
                </cover-view>  
                </block>  
            </swiper-item>  
</swiper>

web-view 组件在 H5端 被转成 iframe 挂载到 body 下，类似于 vue3 的 teloport，在实现时设计如此，而此时滑动的是 swiper-item 组件，所以呈现为无法左右滑动。
针对当前业务场景可以采用 iframe 标签实现您的需求。

<swiper>  
    <swiper-item>  
        <iframe src="https://www.xxx.com"></iframe>  
    </swiper-item>  
    <swiper-item>  
        <iframe src="https://www.xxx.com"></iframe>  
    </swiper-item>  
    <swiper-item>  
        <iframe src="https://www.xxx.com"></iframe>  
    </swiper-item>  
</swiper>

如果是WP提供的嵌套APP，则可以直接使用最上面的代码嵌入即可，如下：



<swiper style="z-index: 99999;" :current="swiperCurrent" @transition="transition"  
            @animationfinish="animationfinish" class="swiper">  
            <swiper-item class="swiper-item">  
                <web-view id="website-list" :webview-styles="webviewStyles" src="https://www.xxx.com">  
                </web-view>   
            </swiper-item>  
</swiper

2022年11月8日

分类： 技术

软件授权

1、下载了安装包不会安装

2、安装了之后提示“Axure RP9已损坏，无法打开，你应该将它移到废纸篓”