446 |448 |h5weex开发相关文章
447 |
this.$getConfig()，通过该方法是可以获取URL上的参数，代码如下：/**
450 | * 获取URL参数
451 | */
452 | getUrlParam: function (key) {
453 | var t = this.$getConfig().bundleUrl;
454 | var reg = new RegExp('[?|&]' + key + '=([^&]+)');
455 | var match = t.match(reg);
456 | return match && match[1];
457 | }
458 | 先讲下本地如何调试：
448 |ctrl+alt+t，也可进入调试；线上调试有点麻烦，需要你的APP支持weex才行，下面以手淘举例：
weex-toolkit，并且保证更新到最新版：npm install -g weex-toolkit；weex debug；chrome devtool；所有的示例会在这里定义，请访问：https://github.com/h5weex/h5weex-example
448 | 449 | 450 |所有的组件会在这里定义，请访问：https://github.com/h5weex/h5weex-components
448 | 449 | 450 |先看一个标准的模板代码：
448 |<template>
449 | <div data-role="recommend_itemlist">
450 | <div class="wrapper" if="{{mds.itemList.length}}">
451 | <div repeat="{{mds.itemList}}" url="{{url}}" class="item-url" onclick="goTargetUrl">
452 | <image src="{{pic_url}}" class="item-img"></image>
453 | <div class="item-info">
454 | <div class="item-price">
455 | <text class="item-price-text">￥</text>
456 | <text class="item-price-text big">{{price.split('.')[0]}}</text>
457 | <text class="item-price-text">{{price.split('.').length > 1 ? '.' + price.split('.')[1] : ''}}</text>
458 | </div>
459 | </div>
460 | </div>
461 | </div>
462 | </div>
463 | </template>
464 | .editorconfig文件，自己根据喜好定义缩进是2个空格还是4个空格class来定义样式，避免class和style混用的情况；class名采用短线来连接，不是驼峰式和下划线连接；先看一个标准的脚本定义代码：
448 |<script>
449 | module.exports = {
450 | data: {
451 | mds: {
452 | dataParams: {
453 | "catId": "-1"
454 | }
455 | },
456 | gdc: {
457 | "ownerId": 2202220535
458 | }
459 | },
460 | methods: {
461 | goTargetUrl: function(e) {
462 | require('@weex-module/event').openURL(e.target.attr.url);
463 | },
464 |
465 | render: function(ds, gd){
466 | var vm = this;
467 | if(ds){ vm.mds = ds; }
468 | if(gd){ vm.gdc = gd; }
469 | }
470 | },
471 | created: function () {
472 | console.log('page created');
473 | },
474 | ready: function () {
475 | console.log('page ready');
476 | }
477 | };
478 | </script>
479 | render方法，保证可以传数据，实现懒加载；created方法中用来定义动态数据的获取；reday方法常用来上报，不要在这里面获取数据，会导致页面重新渲染，消耗性能；标准的weex程序包含三个部分，如下：
448 |<template>
449 | <!-- (required) the structure of page -->
450 | </template>
451 |
452 | <style>
453 | /* (optional) stylesheet */
454 | </style>
455 |
456 | <script>
457 | /* (optional) the definition of data, methods and life-circle */
458 | </script>
459 | 先看一个hello world的实现：
<template>
449 | <container>
450 | <text>{{myname}}</text>
451 | </container>
452 | </template>
453 |
454 | <script>
455 | module.exports = {
456 | data: {
457 | "myname": "hello world"
458 | },
459 | methods: {
460 | render: function(ds) {
461 | this.myname = ds;
462 | }
463 | },
464 | created: function () {
465 |
466 | },
467 | ready: function () {
468 |
469 | }
470 | };
471 | </script>
472 | <script>标签来包含你的脚本；module.exports这个对象中；data里面是定义的数据对象，可以通过this.xxx获取，在模板中是通过``来获取；methods对象中用来定义自己的函数；created是生命周期函数，这个时候模板还没有被渲染，常用来在这里定义数据的更新和获取；ready是生命周期函数，这个时候模板被渲染，常用来做一些自己上报等；