云社区 博客 博客详情
云社区 博客 博客详情

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

Welink小达人 发表于 2020-04-13 14:44:38 04-13 14:44
Welink小达人 发表于 2020-04-13 14:44:38 2020/04/13
1
1

【摘要】 微码开发入门 - 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模板的开发就变得容易了。






登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 1
点赞
分享文章到微博
分享文章到朋友圈

评论 (1)


Welink小达人

1楼2020-04-13 14:45:05
微码开发入门 - Vue 模板开发
0/1000
评论

登录后可评论,请 登录注册

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消