uni-app subNVue 原生子窗体简单使用案例（app端）

平安的刘 發表於 2020-10-23 23:52:00

uni-app subNVue 原生子窗体简单使用案例（app端）

开头先放一些需要大概了解的官方文档链接地址
　　https://uniapp.dcloud.io/use-weex
　　https://uniapp.dcloud.io/api/window/subNVues
　　https://weex.apache.org/zh/docs/api/weex-variable.html
 
1、新建一个 uni-app 项目（使用 Hbuilder X）
<img src="https://img2020.cnblogs.com/blog/1443576/202010/1443576-20201024001744212-1832009816.png">
 
2、项目结构如下（在  pages 目录下的 index 目录中，新建一个 subNVue 目录，在此目录中新建一个 hello.nvue 的文件）
<img src="https://img2020.cnblogs.com/blog/1443576/202010/1443576-20201024001812402-178611730.png">
3、hello.nvue 内容如下：
<div class="cnblogs_code"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_6838cc4e-5298-45be-adf3-cbd0d0625cad" class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_6838cc4e-5298-45be-adf3-cbd0d0625cad" class="cnblogs_code_hide">
<pre><template>
<div>
 <text class="hello">{{ content }}</text>
</div>
</template>

<script>
export default {
 data() {
 return {
 // 父窗体传递过来的内容
 content: ''
 }
 },
 created() {
 const vm = this;
 // 接收信息的页面
 uni.$on('page-popup', (data) => {
 switch( data.type ){
 case 'one':
 vm.content = data.content;
 break;
 case 'two':
 vm.content = data.content;
 break;
 // .... 
 }
 });
 },
 beforeDestroy() {

 },
 methods: {

 }
}
</script>

<style>
.hello {
 font-size: 30px;
 color: red;
}
</style></pre>
</div>
View Code</div>
4、配置 pages.json 文件
<img alt="" loading="lazy" src="https://img2020.cnblogs.com/blog/1443576/202010/1443576-20201024002338697-1896357512.png">
5、index.vue 的内容如下
<div class="cnblogs_code"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_4eaf0bb3-1a31-4aa7-9b2b-594a948a726b" class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_4eaf0bb3-1a31-4aa7-9b2b-594a948a726b" class="cnblogs_code_hide">
<pre><template>
<view class="container">
 <view style="background-color: #0A98D5;
 text-align: center;
 line-height: 600rpx;
 height: 600rpx;
 margin-bottom: 20rpx;">
 Hello,word
 </view>
 <button @click="openWindows('one')">点击打开子窗体1</button>
 <button @click="openWindows('two')">点击打开子窗体2</button>
 <button @click="openWindows('three')">点击打开子窗体3</button>
</view>
</template>

<script>
export default {
 data() {
 return {

 }
 },
 methods: {
 openWindows() {
 uni.getSubNVueById('popup').show();
 const subNVue = uni.getSubNVueById('popup');
 subNVue.show('',250);
 }
 }
}
</script>

<style>
.container {
 padding: 20px;
 font-size: 14px;
 line-height: 24px;
}
</style></pre>
</div>
View Code</div>
 
6、这时效果如下
<img alt="" loading="lazy" src="https://img2020.cnblogs.com/blog/1443576/202010/1443576-20201024002708877-2082445927.gif">
如果在子窗体已经增加一些静态内容并保存后，进行点击打开子窗体操作时，发现还是空白滴........请重启一下....（有可能 Hbuilder X 未同步到文件数据...）
 注意：nvue 文件的代码编写与 vue 文件里的代码稍微有些差异。nvue文件代码编写请看这里：https://weex.apache.org/zh/docs/api/weex-variable.html
 
7、下面是我做的一些简单例子
<img src="https://img2020.cnblogs.com/blog/1443576/202010/1443576-20201024010548846-1081259327.gif">
 
8、由于.....本人比较懒...就直接放案例的地址吧（GitHub .... 怕访问网速太慢... 也放到 gitee上吧  ），有需要可以看源码，里边也有写注释。
GitHub : https://github.com/oukele/uni-app/tree/main/demo-subnvue/demo-subnvue
Gitee：https://gitee.com/oukele/uni-app-demo/tree/master/demo-subnvue/demo-subnvue 
来源：https://www.cnblogs.com/oukele/p/13866900.html

頁: [1]

琼殿技术论坛's Archiver

uni-app subNVue 原生子窗体简单使用案例（app端）