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

258资源分享 > 建站学院 > 微信开发 > 模块化高效开发微信小程序——汽车试驾

分类

织梦教程帝国教程 discuz教程微信开发 MYSQL教程 MSSQL教程网站运营 ecshop教程前端教程 Phpweb教程 php编程服务器架设 ASP编程脚本编程

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

发布时间:2020-10-24

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=http://www.yiyongtong.com/archives/"{{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) }, })

本文标签

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

上一篇：微信小程序-自定义NavBar组件（1）
下一篇：小程序音频API采坑完全手册

258资源分享网

分类

推荐文章

推荐下载

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

本文标签