uni-app 进阶之创建组件 / 原生渲染【day9】

为了提高开发效率，hbuilderx 将常见的 uni app 代码封装到以 u 开头的代码块中。如果在模板标记中输入 ulist，将自动生成以下代码：

<view class="uni-list">    <view class="uni-list-cell">        <view class="uni-list-cell-navigate uni-navigate-right" v-for="(item,index) in list" :key="index">            {{item.value}}        </view>    </view></view>

几乎所有组件，无论是内置的还是 uni-UI，都已封装为代码块。在 hbuilderx 的 Vue 代码模板区域中单击 u，代码助手将提示所有可见的列表。您还可以查看 hbuilderx 菜单工具-代码块设置-vue 代码块左侧列表中的所有代码。

使用 Chrome 调试 H5

设置定时器：

//选择适合需求的定时器this.timer = setTimeout( () => {    // 这里添加您的逻辑    }, 1000)this.timer = setInterval( () => {    // 同上      }, 1000)

进入 uni app 项目，单击工具栏中的 Run->Run to browser->select chrome 将 uni app 运行到浏览器。您可以参考运行 uni 应用程序。在浏览器上运行 uni 应用程序后，您可以像普通 web 项目一样进行预览和调试。单击 chrome 控制台的 sources 列以调试 JS 断点。在页面下的网页包中找到项目目录，直接找到对应的 Vue 页面进行断点调试；或按 ctrl+p 搜索文件名，进入调试页面；您也可以单击控制台上的日志信息，进入相应的页面进行调试。

原生渲染的视图层

在 app nvue 中，折扣也存在。react native 中也存在此问题。Weex 发明了 bindingx 机制，它可以在 JS 中将表达式传递给本机，然后在本机解析后根据指令操作视图层。这项技术也可以在 uni app 中使用。作为一个表达式，bindingx 不如 JS 强大，但可以实现基本的手势监控和动画。例如，当 uni UI 的 swiperaction 组件在 app nvue 下运行时，bindingx 将自动启用以实现平滑跟踪。

对于复杂页面，更新某个区域的数据时，需要将该区域制作成一个组件，因此更新数据时只更新该组件，否则会更新整个页面的数据，导致点击延迟。这是自定义组件编译模式的特点。产生差异的原因是小程序当前仅提供组件差异更新机制，无法自动计算所有页面差异。

代码块分为标记代码块和 JS 代码块。如果在脚本标记中输入 ushowtoast-enter，将自动生成以下代码：

uni.showToast({    title: '',    mask: false    duration: 1500});

onUnload 如下：

onUnload() {  if(this.timer) {      clearTimeout(this.timer);      this.timer = null;    }  }