【技术教程】【微码开发】微码开发入门 - Vue 模板开发

在打开微码vue模板后会自动安装项目依赖：

安装完依赖后，资源管理器的 “WECODE TOOLS”会出现菜单，先来看下vue模板的结构：

123456789101112131415161718192021222324252627282930313233|—— build│   ├── common                         // JS API公共文件目录          ├── /html/                   // html文件          ├── /js/                     // JS API脚本文件          ├── /css/                    // 公共组件库样式文件          ├── /assets/                 // 资源目录               ├── /images/            // 公共图片资源               ├── /media/             // 公共媒体资源│   └── apps                           // 开发的We码应用包文件目录          ├── /123456789012345/        // 应用名称               ├── /production/        // 应用的构建环境。打包时，cli 会打包该文件夹下的文件                    ├── /html/         // 应用的html文件                    ├── /js/           // 应用的js文件                    ├── /css/          // 应用的css样式文件├── package.json                       // node相关环境的配置文件├── public                             // 静态资源目录，内容会直接拷贝到打包目录中├── scripts                            // 编译相关├── src                                // 源代码目录│   ├── common                         // 公共资源，包括 css/js  等│   ├── components                     // 组件│   ├── config                         // 配置项，包括 api 等│   ├── i18n                           // 国际化│       ├── en_US                      // 英文配置信息│       └── zh_CN                      // 中文配置信息│   ├── router                         // 路由│   ├── store                          // store，页面数据按模块存储│   ├── utils                          // 提供一些小工具│   ├── views                          // 页面│   ├── App.vue                        // 主页│   ├── index.html                     // 主页 html│   ├── main.js                        // webpack打包入口├── test                               // jest测试集└── vue.config.js                      // vue-cli3.0 配置文件

点击“本地调试”，将会开始编译运行项目，最后将在默认浏览器打开首页 ( src/views/Home.vue )。

到这里，项目已经跑起来了，可以开始加入我们想要的功能了。
我们来看一下Home.vue：

123456789101112131415161718192021222324252627282930313233343536373839<template>  <div class="App">    <div class="App-header"></div>    <h1 class="App-title">{{ $t('common.welcome') }}</h1>    <p class="App-intro">      {{ $t('home.edit') }}      <code>/src/views/Home.vue</code>      {{ $t('home.saveReload') }}    </p>    <router-link to="/desc" class="desc-link">{{ $t('home.wlkReactTemplateIntro') }}</router-link>    <router-link to="/vueTemplateIntro" class="desc-link">{{      $t('home.wlkVueTemplateIntro')    }}</router-link>    <div style="display:none;">{{ userInfo }}</div>  </div></template><script>  import { mapState, mapActions } from 'vuex';  export default {    data() {      return {};    },    created() {      window.HWH5.navTitle({ title: 'Hello World!' });      this.getUserInfo();    },    computed: {      ...mapState(['userInfo'])    },    methods:     {      ...mapActions(['getUserInfo'])    }  };</script><style lang="css" scoped>  .App {    padding: 10px;  }</style>

这个就是标准的vue开发模板了，从上到下依次是模板、脚本、样式，这里我们就不问为什么了，记住每个页面都用这样的结构就可以了，之前说过react是通过state来存储页面数据的，那么vue呢，我们看到内置的data方法return的内容就是页面数据了，可以在模板中使用。

1data() {   return {}; }

接下来我们来实现一个简易版的新闻功能，它有一个列表页、详情页，在详情页会有一个分享功能，用于分享到好友或者群

接下来设计主页，也就是列表页，src/views/Home.vue 。
首先来改下页面标题，在created函数中进行操作：

1created() {   window.HWH5.navTitle({ title: '示例新闻列表' }); }

加入一个导航栏，这里使用官方提供的UI组件（https://open.welink.huaweicloud.com/wecode/docs/dev/ui_cloud/navbar/navbar.html?v=1547690385） 。
把 <template> 中的代码替换成下面这段导航dom结构：

1234567891011121314151617<div class="page">  <div class="page__bd">    <div class="weui-tab">      <div class="weui-navbar">        <div class="weui-navbar__item weui-bar__item_on">            <span class="weui-navbar__item_title">热点</span>        </div>        <div class="weui-navbar__item">            <span class="weui-navbar__item_title">推荐</span>        </div>        <div class="weui-navbar__item">            <span class="weui-navbar__item_title">原创</span>        </div>      </div>    </div>  </div></div>

保存后在浏览器看到效果如下：

接下来设计一个列表，这里还是使用官方UI组件中 ListView组件，如果你需要个性化列表样式，请自行设计，打开（https://open.welink.huaweicloud.com/wecode/docs/dev/ui_cloud/input/listview.html?v=1547690386）引入UI组件，因为有三个分类，所以列表也需要有三个容器包裹，这样等下好做导航切换效果：
template：

12345678910111213141516171819202122232425262728293031<div class="news-list">  <div class="weui-cells active">    <div class="weui-listview-box">      <div class="weui-listview-box__bg">        <div class="weui-listview-view"><img :src="news1" /></div>        <div class="weui-listview-title">          亚美尼亚 被神灵和奇迹环绕的国度        </div>        <div class="weui-listview-footer"><span>07-19 09:05</span></div>      </div>    </div>  </div>  <div class="weui-cells">    <div class="weui-listview-box">      <div class="weui-listview-box__bg">        <div class="weui-listview-view"><img :src="news2" /></div>        <div class="weui-listview-title">          到手的金牌飞了!英跳水名将最后一跳领先30分 却横拍入水抱女友痛哭        </div>        <div class="weui-listview-footer"><span>07-18 21:31</span></div>      </div>    </div>  </div>  <div class="weui-cells">    <div class="weui-listview-box">      <div class="weui-listview-box__bg">        <div class="weui-listview-view"><img :src="news3" /></div>        <div class="weui-listview-title">史陶芬伯格刺杀希特勒，这个行动成功概率有多少？</div>        <div class="weui-listview-footer"><span>07-19 08:36</span></div>      </div>    </div>  </div></div>

script：

12345678910111213import news1 from '../../public/news1.jpg';import news2 from '../../public/news2.png';import news3 from '../../public/news3.jpg';export default {  data() {    return {      news1,      news2,      news3    };  },  created() {    window.HWH5.navTitle({ title: '示例新闻列表' });  },  computed: {},  methods: {}};

从上面的代码可以看到，图片是通过import方式导入的，然后在data函数中输出，最后在template中绑定数据。vue中的绑定需要使用到v-bind，缩写就是 : ，所以最终就是 <img :src="news1" />
这里需要用样式控制显示和隐藏，在 <style> 标签中加入样式：

123.news-list{ padding-top: 2.5rem; }.news-list .weui-cells{ display: none; margin-top: 0; }.news-list .weui-cells.active{ display: block; }

保存看效果：

好啦，一个新闻列表的结构大致完成了，当然这里的数据是写死的，具体开发中需要使用后端接口提供的数据，关于如何使用网络请求，请参考官方api：在微码中发送网络请求（https://open.welink.huaweicloud.com/wecode/docs/dev/jsapi/fetch/fetchinternet_cloud.html?v=1547690385）

接下来实现导航栏的切换效果，了解vue的同学都会知道vue是数据驱动的，也就是 data 方法中返回的的数据改变，则模板中中任何绑定这个数据的地方都会发生改变。利用这一点，我们做导航的切换效果就不需要操作dom了，只需要适时改变data就可以了。

12345678data() {  return {    news1,    news2,    news3,    navIndex: 0  };}

接下来在在每个列表中引用这个navIndex，那么问题来了，如何通过这个navIndex的值来控制列表的显示与隐藏呢？我们设想一下，列表是按0,1,2的顺序排列下去的，如果我们判断下如果navIndex的值正好等于列表自身的index值，那么就设置为显示状态，反之则隐藏，这岂不是完美了？O(∩_∩)O~
给导航栏以及列表组件加入下面的条件和事件：

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950<template>  <div class="page">    <div class="page__bd">      <div class="weui-tab">        <div class="weui-navbar">          <div :class="`weui-navbar__item ${navIndex === 0 ? 'weui-bar__item_on' : ''}`" @click="setNavIndex(0)">            <span class="weui-navbar__item_title">热点</span>          </div>          <div :class="`weui-navbar__item ${navIndex === 1 ? 'weui-bar__item_on' : ''}`" @click="setNavIndex(1)">            <span class="weui-navbar__item_title">推荐</span>          </div>          <div :class="`weui-navbar__item ${navIndex === 2 ? 'weui-bar__item_on' : ''}`" @click="setNavIndex(2)">            <span class="weui-navbar__item_title">原创</span>          </div>        </div>      </div>      <div class="news-list">        <div :class="`weui-cells${navIndex === 0 ? 'active' : ''}`">          <div class="weui-listview-box">            <div class="weui-listview-box__bg">              <div class="weui-listview-view"><img :src="news1" /></div>              <div class="weui-listview-title">                亚美尼亚 被神灵和奇迹环绕的国度              </div>              <div class="weui-listview-footer"><span>07-19 09:05</span></div>            </div>          </div>        </div>        <div :class="`weui-cells${navIndex === 1 ? 'active' : ''}`">          <div class="weui-listview-box">            <div class="weui-listview-box__bg">              <div class="weui-listview-view"><img :src="news2" /></div>              <div class="weui-listview-title">                到手的金牌飞了!英跳水名将最后一跳领先30分 却横拍入水抱女友痛哭              </div>              <div class="weui-listview-footer"><span>07-18 21:31</span></div>            </div>          </div>        </div>        <div :class="`weui-cells${navIndex === 2 ? 'active' : ''}`">          <div class="weui-listview-box">            <div class="weui-listview-box__bg">              <div class="weui-listview-view"><img :src="news3" /></div>              <div class="weui-listview-title">史陶芬伯格刺杀希特勒，这个行动成功概率有多少？</div>              <div class="weui-listview-footer"><span>07-19 08:36</span></div>            </div>          </div>        </div>      </div>    </div>  </div></template>

:class和@click是vue中绑定数据和绑定事件的用法。

事件是写在methods函数中的：

12345methods: {   setNavIndex(index) {         this.navIndex = index     }}

active和onClick是组件内部提供的两个属性，请参照组件官方文档。

保存就可以看到导航栏可以切换了，且下面的列表也会跟随切换。

好了，接下来需要设计一个详情页。详情页就是一篇文章，实际开发中，整个文章dom结构都是从接口得到的，这里使用静态内容做一个示范。
将src/views下的Desc目录更名为News，并且将里面的Desc.vue更名为News.vue作为详情页，然后在src/router/index.js中更改路由：
src/router/index.js：

1234567891011121314const routes = [  {    path: '*',    redirect: '/'  },  {    path: '/',    name: 'home',    component: Home  },  {    path: '/news',    component: view('/News/News.vue')  }]

然后我们加入详情页的dom结构：
src/views/News/News.vue:

12345678910111213141516171819202122232425262728293031323334353637383940<template>  <div class="page">    <div class="page__bd">      <article style="overflow: hidden; max-height: none;">        <div class="article-content">          <div class="head">          <h1 class="title">亚美尼亚 被神灵和奇迹环绕的国度</h1>          <div class="info">              <span class="time js-time">2019-07-19 09:05</span>          </div>          </div>          <div class="content">            <p>当飞机在机场上空盘旋，等待降落到跑道上时，你可趁机望望窗外的风景。在你面前，有如明信片上的照片一样美丽的就是亚拉拉特山。它是世界上最著名的山之一，毋庸置疑也是宗教地位最高的山之一。虽然三大亚伯拉罕宗教（犹太教、基督教与伊斯兰教）的教徒在许多事情上存在分歧，但他们都相信《旧约·创世纪》中的描述，即当上帝让世界发洪水的时候，诺亚方舟最后停泊的地方就在亚拉拉特山。</p>            <div class="photo"><img alt="" :src="news1" /></div>            <p>虽然有许多人不相信诺亚方舟的故事，但在高加索的这一部分地区，确有一些地理证据表明这里曾发过大洪水。如果真的是这样，虽然洪水无疑为当地的民众带来了灾难（并在此之后，被他们的民间传说收录进来，口耳相传）,但洪水影响的也可能仅仅是一小部分地区。一些地理学家与考古学家曾暗示洪水可能是海啸造成的，而在古代人看来，那就是上帝在发怒。亚拉拉特山现在已经不属于亚美尼亚了，它是国境线另一侧的土耳其的领土，对这一点亚美尼亚人格外敏感，但是这座山依旧是亚美尼亚人的民族认同的一个重要的部分。亚美尼亚民族自称是诺亚最小的儿子雅弗的后代；亚拉拉特山出现在国徽与银行发行的纸币上；在亚美尼亚的古代传说中，亚拉拉特山是众神之家，这点非常像古希腊的神都居住在奥林匹斯山一样。亚拉拉特山主宰着埃里温的天际线，亚美尼亚人称，这是一个永恒的提示，即人类在地球上生活是因了上帝的恩泽。</p>            </div>        </div>      </article>      <div id="shareBtn" class="share-btn">        +            </div>    </div>  </div></template><script>  import news1 from '../../../public/news1.jpg';  export default {    data() {      return {        news1      }    }  }</script><style lang="css" scoped>  article{ padding: 10px; }  article .info{ font-size: 0.28rem; font-weight: normal; margin: 0 0 0.12rem 0; color: #888888; }  article p{ text-indent: 2em; margin: 0.6rem 0; }  article img{ width: 100%;}  .share-btn{ display: inline-block; background: #ff6f6f; width: 2rem; height: 2rem; text-align: center; color: #fff; font-size: 2rem; line-height: 2rem; padding: 5px; border-radius: 50%; position: fixed; right: 10px; bottom: 50px; }</style>

看下效果:

在 src/routes/News/index.js 中给列表加上链接，指向详情页：

123456789101112<div :class="`weui-cells${navIndex === 0 ? 'active' : ''}`">  <router-link to="/news" class="desc-link">    <div class="weui-listview-box">      <div class="weui-listview-box__bg">        <div class="weui-listview-view"><img :src="news1" /></div>        <div class="weui-listview-title">          亚美尼亚 被神灵和奇迹环绕的国度        </div>        <div class="weui-listview-footer"><span>07-19 09:05</span></div>      </div>    </div>  </router-link></div>

注意到这个红色的分享按钮了吗？接下来将调用JSAPI做一个分享功能，最终分享到群或者聊天界面显示的是一张卡片。使用的是 HWH5.share 这个方法，来看一下参数调用：

参数类型是否必填说明typeString是类型titleString是标题h5UriString是h5页面的UrifromString是分享来源，可以填微码的应用名称descString否描述，title下面会紧接一段描述文本pcUriString否PC端点击打开的链接。isPCDisplay为1时，该参数为必传参数isPCDisplayNumber否是否在PC显示分享信息。1：显示，0：不显示iconURLString否分享图标

这里面最重要的一个参数 h5Uri 就是微码应用在CloudLink中url链接地址，在根目录下的 plugin.json 中可以看到：

123456789101112{  "indexURL": "h5://20190709172642809/html/index.html",  "appId": "20190709172642809",  "minSdkVersionName": "1.2.8",  "versionName": "1.0.0",  "permissions": [    "outerNet",    "contact",    "file",    "media"  ]}

其中 indexURL 就是我们要用到的参数 h5Uri，好了，开始写分享这一部分的代码，首先定义一个分享方法：

1234567891011121314151617181920212223export default {  data() {    return {      news1    }  },  methods: {    handleShareBEvent() {      const _shareParams = {        title: '亚美尼亚 被神灵和奇迹环绕的国度',        desc: '亚美尼亚 被神灵和奇迹环绕的国度',        h5Uri: 'h5://20190709172642809/html/index.html',        iconURL: 'https://open.welink.huaweicloud.com/wecode/image/icon/20190709/7ab9c09c-81c5-45d9-97cf-9b52cd01e676.png',        from: 'simpleDemo'      };       window.HWH5.share({        type: 'IM',        data: _shareParams      }).catch(error => {        console.log('分享发生异常', error);      })    }  }}

然后给分享按钮绑定这个方法：

1<div id="shareBtn" class="share-btn" @click="handleShareBEvent">   + </div>

title 填上创建应用时填写的应用名称，针对于当前页面，我填上了新闻的标题，具体情况具体对待
desc 写上简单的描述，针对于当前页面，我填上了新闻的简介
h5Uri 填上plugin.json中的 indexURL 字段值
iconURL 分享卡片中的缩略图，在应用详情中可以找到，也可以使用当前分享页面的具体图片，更为贴切
from 填上应用英文名
父级参数 type 就填写 ‘IM’。

到这里一个简单的新闻带分享功能就完成了，vue 模板的关键是要掌握vue的一些核心概念，例如v-bind、v-on、v-if、v-for、v-model等等，以及vue的钩子函数，了解这些以后微码vue模板的开发就变得容易了。