codecamp

WeX5 实战案例:Hello World App

【学习目标】

    通过学习 HelloWorld App学会使用WeX5开发App的过程,包括新建应用、新建页面、运行调试、生成App、运行App。初步了解WeX5的双向数据绑定。

【案例说明】

    Hello World App是学习WeX5开发的第一个应用,是只有一个页面的入门应用。案例运行效果如图1-21。App运行效果是,在输入框input中输入“小伙伴”,在输入框下面显示“Hello 小伙伴”。因此,页面中的展现组件就使用input和output组件,input组件作为输入框,output组件用于显示文本。增加数据组件data,使用双向数据绑定机制,input和output都关联data。input中的内容会存入data组件,data组件中的值会显示在output中。


图1-21  Hello World App运行效果

   

【在线资源】

       本案例提供开发过程视频讲解使用WeX5开发App的过程。

 1-2  开发Hello World App


WeX5 开发原理
WeX5 生成App
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

WeX5简介

前言

第1章 初识WeX5

WeX5 H5 App简介

WeX5 开发原理

WeX5 开发过程

WeX5 实战案例:Hello World App

WeX5 开发App

WeX5 生成App

WeX5 关键知识点

WeX5 同步训练

WeX5 实战案例:记账本App

WeX5 开发账目列表

WeX5 开发记一笔

WeX5 开发账目分类设置页

WeX5 开发首页

WeX5 生成App

WeX5 关键知识点

WeX5 同步训练

WeX5 实战案例:扫一扫App

WeX5 使用扫描二维码插件

WeX5 关键知识点

WeX5 同步训练

WeX5 实战案例:仿淘宝App

WeX5 首页

WeX5 商品列表页

WeX5 关键知识点

WeX5 同步训练

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }