开发工具

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进行相应的处理，这里小编在总结总结，以后写的详细一定。关于页面如何双向传递数据，时间有限，就先都这里，希望你们的点赞哦。