开发调试

页面开发

银商手机端小程序使用 Weex 进行页面开发，开发者能够通过撰写 *.vue 文件，基于<template>,<style>,<script> 快速构建组件化的小程序应用。

<template>
    <div class="wrapper" append="tree">
        <image src="logoUrl" class="logo"></image>
        <text class="title">Hello {{target}}</text>
    </div>
</template>

<script>
    import icon from './logo.png'
    export default {
        data: {
            logoUrl: icon,
            target: 'UMS 小程序示例'
        }
    }
</script>

<style>
    .wrapper { align-items: center; margin-top: 180px;}
    .logo { font-size: 48px; margin-top: 50px; color: #004684;}
    .title { width: 360px; height: 82px;}
</style>

注意

使用 Weex 开发手机端小程序应用与Web 浏览器上的开发毕竟有所不同。在Web上有些基于 Vue 的语法，在小程序开发上并不支持，小程序的 Vue 语法只是Vue.js的一个子集。详情可参考：【Vue在终端和Web中的差异】

小程序页面开发通常有两种模式（详情参考单页应用和多页应用）：

单页面应用(SPA)
多页面应用(MPA)

页面调试

开发者可借助 Weex 官网提供调试软件 Weex playground 进行界面的开发调试。

在使用 Weex playground 调试软件时，开发者首先需要将手机和电脑连接到同一个局域网wifi上。

启动调试：

$ weex debug <file>

在命令行输入上述命令，此时启动调试服务器，并同时唤起 Chrome 浏览器打开调试主页。这个调试主页上会有一个二维码，使用 Weex playground 扫描这个二维码可以开启调试。

软件调试步骤：

1.开启 Weex playground 。

2.点击app上的扫码调起扫码摄像头。

3.连接上调试服务器后，页面 App List 中会出现连接上的设备信息。

4.扫描 js 文件入口二维码（这个二维码是程序的入口）。

5.如果手机上出现当前调试页面，则表示连接完成。

Inspector查看页面结构：

点击调试主页上的Inspector，在Inspector里能够查看页面的结构，建议选择vdom来看虚拟dom的结构。

Debugger设置断点、查看调用栈

打开调试页面后，可以使用Debugger设置断点，调试JS文件。

# 开发调试

# 页面开发

# 页面调试

开发调试

页面开发

页面调试