前言2017年1月9日，微信小程序上线。这也标志着Facebook的RN、阿里的Weex、腾讯的小程序三驾马车在2017年并驾齐驱，如今小程序如火如荼。在此，让我们也跟着时代的步伐，在小程序元年从头开始玩自己的小程序。git传送门-试驾小程序开发工具1.微信web开发者工具方便我们在编译的时候实时看到界面变化。我们不将其用于小程序开发，仅作为模型工具。2.VisualStudioCode是微软推出的全新终端编辑器，大大提高了前端工程师的开发效率。这里我们也会用它来开发小程序。之前不知道的同学也可以尝试使用。良心推荐。.3.EasyMorkeasy-mock，一个可以通过它快速生成模拟数据的服务，它可以为我们提供一个数据接口url，然后使用wx.request({url:url,.....})发送数据请求，我的大部分数据都是通过Mork模拟创建小程序创建的：1.目录结构我们创建一个由小程序开发者工具自动生成的目录：page文件夹，page文件夹包含你所有的页面文件，至少是.js。wxml.wxs后缀文件，.json可选utlis文件夹，放置一些需要全局使用的js文件存放所有静态资源如：icons/,images/,js/,.json/提供数据模块/文件夹开发功能模块开发，方便多人协作，大大加快开发效率，也提高了代码可读性。styles/文件夹用于存放页面的css样式文件夹。使用es6模块可以提高代码的复用性和可读性，方便日后维护。2.ES6模块化语言上面我们讲了如何用模块化的方式来处理我们的业务，但实际上我们还是把业务和逻辑分开了。但是我们如何优雅地调用这些模块呢？看来我们会想办法解决的，是的我们的es6承担了这个使命。在创建模块时，我们需要使用exportdefaultModuleName来创建这个模块。比如我们试驾一个小程序，我们可以创建一个exporydefaulttestDrive。在这个模块中，我们只需要定义它。consttestDrive=()=>{}使用我们的箭头函数。引用模块时，只需要从'xxxxx对应文件夹'导入testDriver即可。项目功能首页全面屏轮播图，优雅大气 scroll-view，生成可滚动视图区域 用于视频播放，视频组件使用 人工客服动态评论列表获取用户信息 使用模拟传输数据 具体功能和实用技巧1、首页全屏轮播{{item.sub_header}}{{item.header}}{{item.description}}预约试驾了解更多轮播的一些处理技巧：*轮播不再像我们以前简单放置图片的轮播效果。这里我们动态添加数据根据数据，为每个轮播图片配置一些desc，更好的吸引客户的注意力*使用view来承载我们的desc，并为其添加相应的样式。*动态数据绑定，每个轮播的desc必须不同，这就需要我们绑定数据，使用我们的{{item}}。名称数据从何而来？要不我们去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({})，上面的代码详细介绍了它的使用，今天重点说说。如何使用互联网上的数据？我们每个页面中都有很多内置函数，比如onLaunch()、onLoad()等，每个函数都有不同的作用。我们在页面中声明了一个全局的globalData，在onLaunch函数中使用Object.assign(this.globalData,request.data)为这个全局的globalData赋值，并将我们的数据存储在其中。在我们主页的index.js中调用slide：app.globalData.slides2。使用EasyMork自己创建数据。这不是我们的重点。有兴趣的可以了解EasyMork是如何模拟数据的。调用方法同上。作为例外，我们可以直接导入一个js.json文件，利用我们前面介绍的模块化，可以引用配置到全局数据中。如何传承？data-id="{{item.id}}"在我们点击跳转事件的时候绑定一个数据，这样我们就可以在下一个页面获取idonLoad:function(options){constid=options.id;console.log(id)}，然后我们会根据获取到的id进行相应的处理。在此，小编总结一下，具体内容以后再写。关于如何在页面双向传输数据，时间有限，就说到这里，希望大家喜欢。
