收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
860
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

uni-app弹窗，小程序，弹出层。自定义组件弹窗，解决滚动穿透

7837人阅读 2021/6/25 10:14 总访问：5182901 评论：0 收藏：0 手机
分类: 移动开发

官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html

最简单的弹出一句话：

需要什么东西在内容里边加就行了

  1. <template>
  2.     <view>
  3.         <uni-popup ref="popup" background-color="#fff" >
  4.             士大夫大师傅
  5.         </uni-popup>
  7.         <button type="default" @click="openView()">点击</button>
  8.     </view>
  9. </template>
  11. <script>
  12.     export default {
  13.         data() {
  14.             return {
  16.             }
  17.         },
  18.         methods: {
  19.             openView()
  20.             {
  21.                 this.$refs.popup.open();
  22.             }
  23.         }
  24.     }
  25. </script>
  27. <style>
  29. </style>

弹出中加两个按钮：

  1. <template>
  2.     <view>
  3.         <uni-popup ref="popup" background-color="#fff" >
  4.             <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
  5.                 <button class="button popup-success" @click="toAddNoteHtml()"><text
  6.                         class="button-text success-text">html编辑器(app上推荐使用)</text></button>
  7.                 <button style="margin-top: 10px;" class="button popup-error" @click="toAddNoteMarkdown()"><text
  8.                         class="button-text error-text">markdown编辑器(临时简版)</text></button>
  9.                 </view>
  10.         </uni-popup>
  12.         <button type="default" @click="openView()">点击</button>
  13.     </view>
  14. </template>
  16. <script>
  17.     export default {
  18.         data() {
  19.             return {
  21.             }
  22.         },
  23.         methods: {
  24.             openView()
  25.             {
  26.                 this.$refs.popup.open();
  27.             }
  28.         }
  29.     }
  30. </script>
  32. <style>
  34. </style>

弹出中添加表单元素：

  1. <template>
  2.     <view style="width: 100%;">
  3.         <uni-popup ref="popup" style="width: 100%;" background-color="#fff">
  4.             <view class="popupView">
  5.                 <!-- 基础表单校验 -->
  6.                 <uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData" label-position="top">
  7.                     <uni-forms-item label="标题" style="margin-top: -8px;" required name="name">
  8.                         <uni-easyinput v-model="valiFormData.name" placeholder="请输入标题" />
  9.                     </uni-forms-item>
  11.                     <uni-forms-item label="类型" style="margin-top: -8px;" required name="type">
  12.                         <uni-data-picker :localdata="items" :clearable="false"></uni-data-picker>
  13.                     </uni-forms-item>
  15.                 </uni-forms>
  16.                 <button type="primary" @click="submit('valiForm')">提交</button>
  17.             </view>
  19.         </uni-popup>
  21.         <button type="default" @click="openView()">点击</button>
  22.     </view>
  23. </template>
  25. <script>
  26.     export default {
  27.         data() {
  28.             return {
  29.                 items: [{
  30.                         text: "一年级",
  31.                         value: "1-0",
  32.                         children: [{
  33.                                 text: "1.1班",
  34.                                 value: "1-1"
  35.                             },
  36.                             {
  37.                                 text: "1.2班",
  38.                                 value: "1-2"
  39.                             }
  40.                         ]
  41.                     },
  42.                     {
  43.                         text: "二年级",
  44.                         value: "2-0"
  45.                     },
  46.                     {
  47.                         text: "三年级",
  48.                         value: "3-0"
  49.                     }
  50.                 ],
  51.                 // 校验表单数据
  52.                 valiFormData: {
  53.                     name: '',
  54.                     type: '',
  55.                 },
  56.                 // 校验规则
  57.                 rules: {
  58.                     name: {
  59.                         rules: [{
  60.                             required: true,
  61.                             errorMessage: '笔记标题不能为空'
  62.                         }]
  63.                     },
  64.                     type: {
  65.                         rules: [{
  66.                             required: true,
  67.                             errorMessage: '类型不能为空'
  68.                         }]
  69.                     }
  70.                 }
  71.             }
  72.         },
  73.         methods: {
  74.             openView() {
  75.                 this.$refs.popup.open();
  76.             },
  77.             submit(ref) {
  79.                 this.$refs[ref].validate().then(res => {                                
  80.                     uni.showToast({
  81.                         title: "功能开发中...",
  82.                         icon: "none"
  83.                     })
  84.                     console.log(res);                        
  85.                 }).catch(err => {
  86.                     console.log('err', err);
  87.                 })
  88.             }
  89.         }
  90.     }
  91. </script>
  93. <style scoped>
  95.     /deep/.uni-popup .uni-popup__wrapper {
  96.             width: 80% !important;
  97.             padding: 40rpx;
  98.         }
  100. /*     .popupView {
  101.         width: 600rpx;
  102.         padding: 40rpx;
  103.     } */
  106. </style>

在vue3中的使用

基本使用

页面上也是一样

  1. <uni-popup ref="classRankingPopup" type="bottom">班级排名</uni-popup>

打开弹窗的地方这么写：

  1. // 这里的名称保持和uni-popup上面的ref名称一致即可
  2. let classRankingPopup =ref()
  3. const openClassRankingPopup = ()=>{
  4.   classRankingPopup.value.open()
  5. }

弹窗里边加入一个组件

实现的效果：

组件的代码,圆角这些也是写到这个组件里边，相当于就是弹窗里边的内容,取名叫classSort

  1. <template>
  2.     <view class="container">
  3.         <scroll-view scroll-y="true" style=" height: 1099rpx;">
  4.             <view class="titleWrap">
  5.                 <view class="title">班级排名</view>
  6.                 <view>×</view>
  7.             </view>
  8.             <view class="splitline"></view>
  9.             <view class="sortWrap">
  10.                 <view class="sortItem" :class="index>2?'simpleIndex':''"  v-for="(item, index) in 9" v-bind:key="index">
  11.                     <!-- 前三名使用图标展示 -->
  12.                     <view class="sortUserWrap" v-if="index<=2">
  13.                         <image class="sort_img" :src="'../../static/sort_'+(index+1)+'.png'">
  14.                             </image>
  15.                         <view class="userName">李美丽</view>
  16.                     </view>
  17.                     <view class="sortUserWrap" v-else>
  18.                         <view class="sortIndex">{{(index+1)}}</view>
  19.                         <view class="userName">李美丽{{(index+3)}}</view>
  20.                     </view>
  21.                     <view class="sortCompleteWrap">
  22.                         <view class="scoreItem">健康:6</view>
  23.                         <view class="scoreItem">思维:6</view>
  24.                         <view class="scoreItem">技术:6</view>
  25.                         <view class="scoreItem">管理:6</view>
  26.                         <view class="scoreItem">总分:6</view>
  27.                     </view>
  28.                 </view>
  29.             </view>
  30.         </scroll-view>
  31.     </view>
  32. </template>
  34. <script setup lang="ts">
  35. import { ref, reactive } from 'vue'
  37. </script>
  40. <style lang="scss" scoped>
  41. .container {
  43.     height: 1099rpx;
  44.     background-color: #fff;
  45.     // border-radius: 10px;
  46.     border-top-left-radius: 20rpx;
  47.     border-top-right-radius: 20rpx;
  48.     padding-left: 20rpx;
  49.     padding-right: 20rpx;
  51.     .sortWrap {
  52.         margin-top: 39rpx;
  53.     }
  55.     .sortItem {
  56.         display: flex;
  57.         align-items: center;
  58.         margin-top: 30rpx;
  60.         .sortUserWrap {
  61.             display: flex;
  62.             align-items: center;
  63.             width: 200rpx;
  64.             // background-color: #ffabcd;
  66.             //宽高比 0.765957
  67.             .sort_img{
  68.                 width: 50rpx;
  69.                 height: 65.27rpx;
  70.             }
  72.             .sortIndex {
  73.                 background: #CFE4FF;
  74.                 color: #4E84FD;
  75.                 width: 50rpx;
  76.                 height: 50rpx;
  77.                 border-radius: 50%;
  78.                 text-align: center;
  79.                 line-height: 50rpx;
  80.             }
  82.             .userName {
  83.                 font-size: 31rpx;
  84.                 margin-left: 10rpx;
  85.                 color: #174A90;
  86.             }
  87.         }
  88.     }
  90.     .simpleIndex{
  91.         margin-top: 39rpx;
  92.     }
  94.     .sortCompleteWrap {
  95.         display: flex;
  96.         margin-left: 15rpx;
  97.         color: #565A67;
  98.         font-size: 30rpx;
  99.         // background: #abcdff;
  100.         justify-content: space-between;
  101.         flex: 1;
  103.         // .scoreItem {
  104.         //     margin-left: 7rpx;
  105.         // }
  106.     }
  107. }
  109. .titleWrap {
  110.     display: flex;
  111.     padding-top: 22rpx;
  112.     justify-content: space-between;
  113.     padding-left: 20rpx;
  114.     padding-right: 20rpx;
  116.     .title {
  117.         color: #3A3B42;
  118.     }
  119. }
  121. .splitline {
  122.     // border: 1rpx solid #E6E6E6;
  123.     margin-left: -20rpx;
  124.     margin-right: -20rpx;
  125.     margin-top: 30rpx;
  126.     height: 1rpx;
  127.     background: #f3f3f3;
  128. }
  129. </style>

页面上的地方

  1. <uni-popup ref="classRankingPopup" type="bottom">
  2.       <classSort></classSort>
  3. </uni-popup>

js:

  1. <script lang="ts" setup>
  2. import classSort from '@/pages/home/classSort.vue'
  4. let classRankingPopup = ref()
  5. const openClassRankingPopup = () => {
  6.   classRankingPopup.value.open()
  7. }
  9. </script>


在微信小程序中自定义组件时，编译可能会报Component is not found in path ‘…’。可以尝试关闭后重新编译一下，或者修改一下组件的目录级别试试，比如加一个component文件夹。

组件里边实现弹窗的关闭

由于弹窗的关闭按钮我们写到了组件里边，所以需要在组件里边来触发父组件的方法，定义一个事件在子组件里边调用一下方法即可。

子组件

给叉叉加一个点击事件：

  1. <view class="titleWrap">
  2.     <view class="title">班级排名</view>
  3.     <view @click="handleClose">×</view>
  4. </view>

点击事件里边去调用父组件传递过来的方法:

  1. <script setup lang="ts" name="classSort">
  2. import { ref, reactive } from 'vue'
  4. // 触发closePopup事件
  5. const emit = defineEmits(['closePopup'])
  6. const handleClose = () => {
  7.   emit('closePopup', '参数')
  8. }
  10. </script>
父组件

绑定一下closePopup事件：

  1. <uni-popup ref="classStarMorePopup" type="bottom" @change="change">
  2.   <classStarMore @closePopup="closeClassStarMorePopup" />
  3. </uni-popup>

在事件里边去关闭弹窗即可：

  1. const closeClassStarMorePopup = () => {
  2.   classStarMorePopup.value.close()
  3. }

解决滚动穿透


防止在弹窗里边滚动的时候主页面也跟着滚动了。

在引入弹窗的页面加入如下的代码：
加到最上面的位置

  1. <template>
  2.     <!-- 解决滚动穿透 -->
  3.     <page-meta :page-style="'overflow:' + (state.popupShow ? 'hidden' : 'visible')"></page-meta>

然后需要有一个state.popupShow属性

  1. const state = reactive({
  2.     popupShow: false,
  3.     title: '更新',
  4. })

然后在弹窗里边加一个change事件
用于监听弹窗是否被打开，打开的时候就要禁用当前页面的滚动了撒。如果有多个弹窗可以监听一个事件即可。

  1. <uni-popup ref="classStarMorePopup" type="bottom" @change="change">
  2.   <classStarMore @closePopup="closeclassStarMorePopup" />
  3. </uni-popup>
  5. <uni-popup ref="scoreRecordPopup" type="bottom" @change="change">
  6.   <scoreRecord @closePopup="closescoreRecordPopup" />
  7. </uni-popup>

change事件就是修改一下state.popupShow属性的状态

  1. const change = (e: any) => {
  2.   state.popupShow = e.show
  3. }

弹窗样式效果2,带一点tag菜单的效果

效果图：

代码：
  1. <template>
  2.     <view class="classStarMore_container">
  3.         <scroll-view scroll-y="true" style=" height: 999rpx;">
  5.             <view class="titleWrap">
  6.                 <view class="title">班级之星</view>
  7.                 <view @click="handleClose">×</view>
  8.             </view>
  10.             <view class="classStar">
  11.                 <view class="splitline"></view>
  12.                 <view class="tagWrap">
  13.                     <view class="tagContent">
  14.                         <view class="tagItem" :class="dealClassStarChoise(1)" @tap="getStuScoreSortByClassAndType(1)">
  15.                             健康
  16.                         </view>
  17.                         <view class="tagItem" :class="dealClassStarChoise(2)" @tap="getStuScoreSortByClassAndType(2)">
  18.                             思维
  19.                         </view>
  20.                         <view class="tagItem" :class="dealClassStarChoise(3)" @tap="getStuScoreSortByClassAndType(3)">
  21.                             技术
  22.                         </view>
  23.                         <view class="tagItem" :class="dealClassStarChoise(4)" @tap="getStuScoreSortByClassAndType(4)">
  24.                             管理
  25.                         </view>
  26.                     </view>
  27.                     <view>
  28.                         <!-- <view class="moreTag">更多 ></view> -->
  29.                     </view>
  30.                 </view>
  32.                 <view class="sortWrap">
  33.                     <view class="sortItem" :class="index > 2 ? 'simpleIndex' : ''" v-for="(item, index) in 10"
  34.                         v-bind:key="index">
  35.                         <view class="sortUserWrap" v-if="index <= 3">
  36.                             <image class="sort_img" :src="'../../static/sort_' + index + '.png'">
  37.                             </image>
  38.                             <view class="userName">缪喵{{ index }}</view>
  39.                         </view>
  40.                         <view class="sortUserWrap" v-else>
  41.                             <view class="sortIndex">{{ index }}</view>
  42.                             <view class="userName">缪喵{{ index }}</view>
  43.                         </view>
  44.                         <view class="sortCompleteWrap">
  45.                             <view class="completeScoreValue">积分:{{ index * 20 }}</view>
  46.                         </view>
  47.                     </view>
  48.                 </view>
  49.             </view>
  51.         </scroll-view>
  52.     </view>
  53. </template>
  55. <script setup lang="ts">
  56. import { ref, reactive, defineProps, inject } from 'vue'
  57. import { onShow } from '@dcloudio/uni-app'
  59. const state = reactive({
  60.     studentScoreSortType: [] as any,
  61.     // 这里配置默认选中的
  62.     taskTypeEnum: 2
  63. })
  66. const emit = defineEmits(['closePopup'])
  67. const handleClose = () => {
  68.     emit('closePopup', '参数')
  69. }
  72. onShow(() => {
  73. })
  75. const getStuScoreSortByClassAndType = async (taskTypeEnum: number) => {
  76.     console.log("处理点击",taskTypeEnum)
  77.     // 数据请求换成自己的逻辑
  78.     state.taskTypeEnum = taskTypeEnum
  79. }
  81. // 处理样式选中
  82. const dealClassStarChoise = (taskTypeEnum: number) => {
  83.     if (taskTypeEnum === state.taskTypeEnum) {
  84.         return "cur"
  85.     }
  86. }
  87. </script>
  90. <style lang="scss" scoped>
  91. .classStarMore_container {
  92.     height: 999rpx;
  93.     background-color: #fff;
  94.     // border-radius: 10px;
  95.     border-top-left-radius: 20rpx;
  96.     border-top-right-radius: 20rpx;
  98.     .titleWrap {
  99.         display: flex;
  100.         padding-top: 22rpx;
  101.         justify-content: space-between;
  102.         padding-left: 20rpx;
  103.         padding-right: 20rpx;
  104.         font-size: 30rpx;
  106.         .title {
  107.             color: #3A3B42;
  108.         }
  109.     }
  111.     .splitline {
  112.         margin-top: 20rpx;
  113.         height: 1rpx;
  114.         background: #E6E6E6;
  115.     }
  117.     .classStar {
  118.         background-color: #fff;
  119.         margin-top: 23rpx;
  120.         // padding-top: 23rpx;
  121.         padding-bottom: 23rpx;
  123.         .classStarTitle {
  124.             font-size: 30rpx;
  125.             color: #3A3B42;
  126.             margin-left: 20rpx;
  127.             // margin-top: 23rpx;
  128.         }
  130.         .tagWrap {
  131.             display: flex;
  132.             justify-content: space-between;
  133.             margin-top: 23rpx;
  135.             .tagContent {
  136.                 display: flex;
  137.                 margin-left: 20rpx;
  139.                 .tagItem {
  140.                     width: 110rpx;
  141.                     height: 45rpx;
  142.                     line-height: 45rpx;
  143.                     text-align: center;
  144.                     margin-right: 30rpx;
  145.                     background: #F5F5F5;
  146.                     border-radius: 25px 25px 25px 25px;
  147.                     font-size: 28rpx;
  148.                     color: #909399;
  149.                 }
  151.                 .cur {
  152.                     background-color: #4D9DF5;
  153.                     color: #FFFFFF;
  154.                 }
  155.             }
  157.             .moreTag {
  158.                 color: #4D9DF5;
  159.                 font-size: 24rpx;
  160.                 height: 45rpx;
  161.                 line-height: 45rpx;
  162.                 margin-right: 30rpx;
  163.             }
  164.         }
  166.         .sortItem {
  167.             display: flex;
  168.             align-items: center;
  169.             margin-top: 30rpx;
  170.             margin-left: 36rpx;
  171.             margin-right: 36rpx;
  172.             justify-content: space-between;
  174.             .sortUserWrap {
  175.                 display: flex;
  176.                 align-items: center;
  178.                 //宽高比 0.765957
  179.                 .sort_img {
  180.                     // width: 43rpx;
  181.                     // height: 56.13rpx;
  182.                     width: 36rpx;
  183.                     height: 47.14rpx;
  184.                 }
  186.                 .sortIndex {
  187.                     background: #CFE4FF;
  188.                     color: #4E84FD;
  189.                     width: 36rpx;
  190.                     height: 36rpx;
  191.                     border-radius: 50%;
  192.                     text-align: center;
  193.                     line-height: 36rpx;
  194.                     font-size: 24rpx;
  195.                 }
  197.                 .userName {
  198.                     font-size: 26rpx;
  199.                     margin-left: 10rpx;
  200.                     color: #174A90;
  201.                 }
  202.             }
  204.             .completeScoreValue {
  205.                 color: #565A67;
  206.                 font-size: 24rpx;
  207.             }
  208.         }
  209.     }
  210. }
  211. </style>

弹窗样式效果3

效果图如下：

代码如下：
  1. <template>
  2.     <view class="completeUsers-container">
  3.         <scroll-view scroll-y="true" style=" height: 799rpx;">
  4.             <view class="titleWrap">
  5.                 <view class="title">完成人次</view>
  6.                 <view class="closeTag" @click="handleClose">×</view>
  7.             </view>
  8.             <view class="splitline"></view>
  10.             <div class="cc-users-content" style="">
  11.                 <div class="item" v-for="(item,index) in 18" :key="index">缪喵喵</div>
  12.             </div>
  14.         </scroll-view>
  15.     </view>
  16. </template>
  18. <script setup lang="ts" name="completeUsers">
  19. import { ref, reactive } from 'vue'
  21. // 触发closePopup事件
  22. const emit = defineEmits(['closePopup'])
  23. const handleClose = () => {
  24.     emit('closePopup', '参数')
  25. }
  27. </script>
  30. <style lang="scss" scoped>
  31. .completeUsers-container {
  33.     height: 799rpx;
  34.     background-color: #fff;
  35.     border-top-left-radius: 60rpx;
  36.     border-top-right-radius: 60rpx;
  37.     padding-left: 20rpx;
  38.     padding-right: 20rpx;
  40.     .cc-users-content {
  41.         display: flex;
  42.         justify-content: space-between;
  43.         flex-wrap: wrap;
  44.         margin-top: 20rpx;
  46.         .item {
  48.             font-family: PingFang SC, PingFang SC;
  49.             font-weight: 400;
  50.             font-size: 28rpx;
  51.             color: #313960;
  53.             background-color: #F7F8FB;
  54.             border-radius: 10rpx 10rpx 10rpx 10rpx;
  56.             flex: 0 0 24%;
  57.             height: 60rpx;
  58.             text-align: center;
  59.             line-height: 60rpx;
  60.             /* 边距懒得算，css函数代替 */
  61.             margin-right: calc(4% / 3);
  62.             margin-bottom: calc(4% / 3);
  63.         }
  65.         /* 去除每行尾的多余边距 */
  66.         .item:nth-child(4n) {
  67.             margin-right: 0;
  68.         }
  70.         /* 使最后一个元素的边距填满剩余空间 */
  71.         .item:last-child {
  72.             margin-right: auto;
  73.         }
  75.     }
  77. }
  79. .titleWrap {
  80.     display: flex;
  81.     padding-top: 22rpx;
  82.     padding-left: 20rpx;
  83.     padding-right: 20rpx;
  84.     justify-content: center;
  85.     align-items: center;
  86.     /* 垂直居中 */
  87.     position: relative;
  89.     .title {
  90.         font-family: PingFang SC, PingFang SC;
  91.         font-weight: bold;
  92.         font-size: 36rpx;
  93.         color: #313960;
  94.     }
  96.     .closeTag {
  97.         position: absolute;
  98.         right: 10rpx;
  99.     }
  100. }
  102. .splitline {
  103.     // border: 1rpx solid #E6E6E6;
  104.     margin-left: -20rpx;
  105.     margin-right: -20rpx;
  106.     margin-top: 30rpx;
  107.     height: 1rpx;
  108.     background: #f3f3f3;
  109. }
  110. </style>

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

uni-app开始时间与结束时间（结束时间大于开始时间）picker编写
利用uni-app官网里面picker插件代码当点击开始时间后结束时间要大于选择后的开始时间，点击结束时间后开始时间要小于开始时...

uni-app用法与html标签的变化
以前是html标签，比如，现在是小程序组件，比如。那么标签和组件有什么区别，不都是用尖括号包围起来一段英文吗？其实标签...

uni-app无法导入插件
点击网页中右上角的插件导入，可以打开项目，但是就是无法导入插件。是因为，要登录！hbuilder里边也要登录才行，他这个应...

使用uni-app的云端一体插件
初次使用uni-app的云端一体插件步骤还是有点多，也有一些坑，在这里把使用过程记录一下。 一：先下载需要的插件在插件右上...

uni-app中list插件图标问题
如图：他使用uni-icons实现的如果只有text就不会有图标有时候贴的文档不是太完善，还是要下一个完整的插件来对比一下

uni-app发起请求
代码如下：uni.request({ url:&#39;接口地址&#39;, success:(result)=&gt;{ my.lists=result.data; } })注意你的...

uni-app官方文档
https://uniapp.dcloud.io/

uni-app运行与调试
上边有菜单，可以运行到浏览器，也可以运行到内置浏览器运行到内置浏览器的效果：

uni-app引入外部资源，引入外网样式
很简单代码如下：&lt;style&gt; @import&#39;http://image.tnblog.net/amazeui.min.css&#39;; &lt;/style&gt; &lt;st...

uni-app设置起始页
很简单，在pages.json里边配置即可。

uni-app页面无法跳转问题
首先检查一下有没有在pages里边配置没有配置不行的哦或者看看你的跳转方式对不对，如果跳转的是底部菜单，但是你用的是uni....

uni-app 删除失败 setting denied access to....
删除的时候如果文件夹下面还有页面，这样直接删除文件夹是会报错的：删除失败 setting denied access to....这种情况就直接...

uni-app中引入外部js
可以使用代码如下：varscript=document.createElement(&#39;script&#39;); script.src=&quot;http://image.tnblog.net/jqu...

uni-app dom操作
比如引入外部js需要用到的dom操作:varscript=document.createElement(&#39;script&#39;); script.src=&quot;http://image....

uni-app使用web-view引入页面
代码如下：&lt;template&gt; &lt;viewclass=&quot;h5-html&quot;&gt; &lt;web-view:webview-styles=&quot;webviewStyl...

uni-app真机调试
很简单只要手机开启了usb调试，然后hbuilderx会自动获取到手机的然后运行到手机即可华为手机开启use调试：一直点击版本号进...