模块化高效开发微信小程序——汽车试驾

2018-05-15 本文已影响12人极乐叔

2017年1月9日，微信小程序发布。这也标志着FaceBook的RN，阿里的Weex，Tencent的小程序这三架马车在2017年并驱骑行。如今小程序更是如火中天，在这里，让我们也跟进时代的步伐从零基础一起在小程序元年撸个自己的小程序玩玩。 git传送门-试驾小程序

开发工具

1.微信web开发者工具  方便我们在编译时能够实时的看到界面变化，我们并不用此来进行小程序的开发，只充当一个模仪器来使用。
2.visual Studio Code  微软新推出的一款及终端的编辑器，大大的提高了前端工程师的开发效率，这里我们也将用此来进行小程序的开发。没有了解过的同学也可以试做去使用下吧，良心推荐。。
3.Easy Mork  easy-mock,通过它能快速生成模拟数据的服务，它能为我们提供一个数据接口url，然后使用wx.request({ url: url, .....})来发送数据请求，我的数据大部分都是通过Mork模拟的

创建小程序：

一、目录架构

我们创建小程序开发者工具帮我们自动生成的目录：

page文件夹, 页面文件夹包含你所有的页面文件,至少包含.js .wxml .wxs后缀文件，.json可选
utlis文件夹 ,放置一些全局需要使用的js文件
app.js 控制全局的逻辑结构
app.json 配置一些全局数据，所有页面都要在此处注册
app.wxml 内容结构
app.wxss 全局样式另外我们也需要自己创建，用于模块式的开发：
assets文件夹用于我们存放所有的静态资源比如：icons/,images/，js/,.json/提供数据
module/文件夹开发功能分模块开发，这样有便于多人协作，大大加快了开发效率，同时也提高了代码的可读性。
styles/文件夹用于存放页面的css样式的文件夹，利用es6的模块可以提高代码的复用性和可读性，便于以后更方便的维护。

二、ES6模块化语言

上面我们讲到如何模块化的去处理我们的业务，实际上还是把业务和逻辑区分开来。但是我们如何优雅的去调用这些模块呢？一似乎我们会去寻找一种方法去解决它，没错我们的es6担任了这个使命。

创建模块时我们需要使用 export default ModuleName 去创建这个模块。比如我们试驾小程序我们创建一个expory default testDrive这样就可以了，在这个模块中我们只要去定义它就好了，const testDrive =（）=> {} 使用我们的箭头函数。
引用模块时我们只需要 import testDriver from 'xxxxx相应的文件夹'。

项目功能

首页全屏轮播图优雅而大气
scroll-view的使用，可滚动视图区域生成
视频播放，video组件使用
人工客服
动态评论列表
获取用户信息
利用mock 传数据

具体功能实用技巧

一、首页全屏轮播图

<swiper class="section hero white"indicator-dots="{{true}}" circular="{{true}}" autoplay="{{true}}">
  <block wx:for="{{slides}}" wx:key="id">
    <swiper-item>
      <image src="{{item.image}}"mode="aspectFill"/>
      <view class="content centered">
        <view class="sub_header">{{item.sub_header}}</view>
        <view class="header">{{item.header}}</view>
        <view class="description">{{item.description}}</view>
        <view class="action">
          <button class="button" bindtap="testDrive">预约试驾</button>
          <button class="button primary" bindtap="readMore" data-id="{{item.id}}">了解更多</button>
        </view>
      </view>
    </swiper-item>
  </block>
</swiper>

轮播图的一些处理技巧： * 轮播图不在像我们以往单纯的放置图片的轮播图的效果了，我们这里动态的添加数据，为每个轮播图都配置一些desc来描述，更好的吸引顾客的眼球。 * 采用view来承载我们的desc，为他们添加相应的样式。 * 动态的绑定数据，每个轮播图的desc肯定不一样，这就需要我们去绑定数据使用我们的{{item}}。name数据从哪来呢？我们去data里去手动添加吗？就让我们在坚持一些。后面更精彩。

二、数据的来源

好吧！！我们不卖关子，直接接着上面的讲吧。数据来源处理方式可以分为两种：

1.URL式的数据封装采用ajax请求，展示本地存储能力

console.log(this.globalData);
展示本地存储能力
ajax请求
wx.request({
  url: 'https://resources.ninghao.net/wxapp-case/db.json',
  data: {},
  method: 'GET', 
  success: (response)=>{
 // console.log(response)
    Object.assign(this.globalData,response.data)
 console.log(this.globalData)
  },
  fail: (error)=>{
 // console.log(error)
  },

})

在我们小程序里，有着丰富的api，其中就用一种非常强大且实用的api: wx.request({}),上面的代码很详细的介绍了他的使用方法，我们直接今天重点吧。怎么去使用网上的数据呢？
在我们每个page里内置很多函数，比如onLaunch(),onLoad()等，每个函数都有不同的作用。我们在page里声明一个全局globalData并且在onLaunch函数里使用Object.assign（this.globalData,request.data）为这个全局globalData赋值，把我们的数据存放进去。在我们首页的index.js去调用它slide: app.globalData.slides

2.使用Easy Mork自己去创建数据，这里不是我们的重点，有兴趣的可以去了解下Easy Mork如何模拟数据吧。调用方法跟上述一样。例外我们呢可以直接引入一个js.json文件可以使用我们之前介绍的模块化去引用并配置到全局data里
三、页面跳转双向传递数据

一个小程序页面跳转总是必须的，但是页面的数据如何去传递呢？

data-id="{{item.id}}" 在我们点击跳转事件绑定一个数据，这样我们就可以在下一个页面获取这个id了

onLoad: function (options) {
    const id = options.id;
    console.log(id)
  },

然后我们再根据这个获取到的id进行相应的处理，这里小编在总结总结，以后写的详细一定。关于页面如何双向传递数据，时间有限，就先都这里，希望你们的点赞哦。

作者：hello等风来
链接：模块化高效开发微信小程序--汽车试驾-实战教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。