使用wepy开发小程序-1|简单了解，其实也没什么难的

2018-05-12 本文已影响40人贝一平

(一) 初始化

//安装命令行工具
cnpm install -g wepy-cli
//初始化项目
wepy init standard projectname
cd projectname
cnpm install
cnpm build --watch

首先说，我们要写样式，但现在写样式已经不单纯是写css那么简单了，你需要使用css预处理器，选择有很多scss，less，stylus，PostCss都可以。我这次选择的是stylus。

在wepy中怎么使用stylus的语法写样式呢？

在.wpy文件中的style标签的lang属性设定即可

<style lang="stylus"></style>

假如我们设置的正确，那么下面这段在项目生成的index.wepy中修改的代码是应该可以看到效果的

  .userinfo
    display: flex
    flex-direction: column
    align-items: center
    border: solid 5rpx blue

结果真是不如人意。

编译失败

不过也还好，至少这个报错，还是让人有点眉目的。
修改wepy.config.js

compilers: {
    stylus:{
      compress:prod
    }
}

安装所缺少的wepy-compiler-stylus

cnpm install wepy-compiler-stylus --save-dev

然后我们再执行，得到结果

2018-05-09_11-37-53.png

这么看来，要想在wepy里使用stylus只有三个步骤

修改wpy文件的style-lang
修改wepy.config.js的compilers
安装wepy-compiler-stylus

（二）为项目引入Mock

由于项目后还还没有搭建好，我们这里先使用mock来模拟一下数据。
当然关于mock的选择也有很多，这里我们选择的是Easy-Mock

1.首先你要去Easy-Mock创建一个项目（此步骤略过）

2.创建接口

创建一个接口的正确步骤

首先，你先要了解下Mock.js的语法，毕竟Easy-Mock是mock的升级版。
我们把Mock官网上的例子复制到Easy-Mock试试，看得到什么结果

{
  "data": {
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
      // 属性 id 是一个自增数，起始值为 1，每次增 1
      'id|+1': 1
    }]
  }
}

思考这个接口你会得到什么样的结果，list数组是得到固定的10个数据，还是1-10之间随机的数据？

使用Easy-Mock.png

先点更新，更新接口，然后再预览，预览时多刷新几次，你就会发现每次的到的list的数组长度都不一样。

怎么使用呢？
回到接口列表页面，选择复制接口地址。

使用接口

（三）初次使用，一切从简

首页功能模块划分
首页 = banner + panel（=title+list）
我们先看看怎么实现一个banner吧。

在wepy中我们应该如何使用小程序的原生组件？

原本在原生的小程序里面呢，是有个十分简易的轮播组件可供我们使用的，但是换到了wepy框架，我们还能使用原生组件吗？
当然是可以的！！！

你仔细看看初始化的index文件就知道了。其实能不能使用原生的组件不是重点，重点是怎么给原生的组件传值？

换句话说就是：
我们如何请求接口中的轮播图数据？
又如何将这些数据在组件中展示出来？
最后又如何为这些轮播图图片绑定事件？

这三个问题，仔细想，最基础的是什么？是不是怎么将数据展示出来啊！这很重要，数据是否写死不重要，能展示才是最重要的。其次是绑定事件吧，最后才是请求banner数据，并且替换。

按照这个顺序我们来解决上面的问题。

<template>
  <view class="banner">
      <swiper scroll-x="true" style=" white-space: nowrap; display: flex" >
          <swiper-item class="bnr-img">
              <image src="{{banner[0].img}}">
          </swiper-item>
          <swiper-item class="bnr-img">
              <image src="{{banner[1].img}}">
          </swiper-item>
          <swiper-item class="bnr-img">
              <image src="{{banner[2].img}}">
          </swiper-item>
      </swiper>
  </view>
</template>
<script>
   data = {
      // banner数据
      banner: [
        {
          img: '/assets/images/test.jpeg',
          url: '1'
        },
        {
          img: '/assets/images/timg.jpeg',
          url: '2'
        },
        {
          img: '/assets/images/dimg.jpg',
          url: '3'
        }
      ]
    }
</script>

现在就要注意一个问题了，我们这么写虽然能得出结果，但是并不好，在原生小程序中可以使用wx:for循环出图片，那么：

在wepy框架中如何实现for循环？

在wepy中要想实现原生的wx:for循环，就需要使用<repeat>。

    <view class="banner">
      <swiper scroll-x="true" style=" white-space: nowrap; display: flex" >
        <repeat for="{{banner}}" key="bnr" index="index" item="item">
          <swiper-item class="bnr-img">
            <image src="{{item.img}}"></image>
          </swiper-item>
        </repeat>
      </swiper>
    </view>

到现在为止，我觉得大部分的内容我们都已经解决了。
现在我们来实现点击图片跳转到相应的页面，那么

如何为图片添加点击事件呢？

wepy事件绑定.png

手册中说的也很清楚，对于事件绑定，含参和不含参的都做了说明。
那么我们就分别实践一下。

1-不含参：点击图片弹出提示框

      tap () {
        wx.showModal({
          title: '提示',
          content: '这是一个模态弹窗',
          success: function(res) {
            if (res.confirm) {
              console.log('用户点击确定')
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
})
      },

简单的试了，一下，这么写我们只是测试不传参的情况，实际上调用wx
原生的组件在wepy1.7.2之前还是会报错的。

2-含参

我们接着再来实践一个带着参数的，点击图片打印出相应需要跳转的url

<template>
   <swiper-item class="bnr-img" @tap="tap({{item.url}})">
       <image src="{{item.img}}"></image>
   </swiper-item>
</template>
<script>
      tap (url) {
       console.log(url);
      },
</script>

大概就简单的试了试这些内容。
最后我们要进行请求的测试和练习。

在wepy中如何进行请求呢？

这次我们不要写死banner广告，毕竟不可能没换次广告就要重新上个新版本，你要知道小程序的上传都是要碰运气的。

讲一下，关于点击图片发送请求的问题：
指路：https://tencent.github.io/wepy/document.html#/?id=page%E9%A1%B5%E9%9D%A2%E5%AE%9E%E4%BE%8B%E5%92%8Ccomponent%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B

注意，对于WePY中的methods属性，因为与Vue中的使用习惯不一致，非常容易造成误解，这里需要特别强调一下：WePY中的methods属性只能声明页面wxml标签的bind、catch事件，不能声明自定义方法，这与Vue中的用法是不一致的。

这是文档中对于自定方法的说明，我们现在要做的就是需要一个自定义函数来实现我们的数据请求。我们先按照手册上说的试一试。

自定义事件getData.png

知道了怎么写自定义事件并成功调用之后，我们要解决的问题就是数据请求了。

如果你写过原生小程序，我想你一定会被那一层又一层的回调恶心到，不过现在好了，原生小程序也支持promise了。但是wepy更好，它甚至为你提供了async/await。

但是，一切都是有条件的。
指路：https://tencent.github.io/wepy/document.html#/?id=%e4%bb%a3%e7%a0%81%e8%a7%84%e8%8c%83

文档中有详细的说明，要想使用promise等方法，需要先开启promise。
https://github.com/Tencent/wepy/wiki/wepy%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8Promise

也就是说你得按照上面的方法配置下才行。然后分别用promise和async/await实现请求:

    getData(url){
      console.log("测试下");
      wepy.request(url).then((d) => console.log(d));
    }
    async request (url) {
      let d = await wepy.request(url);
      console.log("async-await");
      console.log(d);
    }