258资源分享网

想学一下微信小程序，发现文档这东西，干看真没啥意思。所以打算自己先动手撸一个。摩拜单车有自己的小程序，基本功能都有，方便又小巧，甚是喜爱。于是我就萌生了一个给ofo共享单车撸一个小程序(不知道为啥ofo没有小程序)的想法。Let's do it!

由于本文篇幅过长，影响浏览体验，我对这篇文章做了一下拆分，修正了一些错误。有需要的可以移步浏览 后续: 有位php攻城狮根据此前端项目添加了后台数据支持，详情请转:

先上一波效果图：

 

1.首页地图页

 

2.维修报障页

 

3.登录页

 

4.钱包余额页

 

5.充值页

 

6.获取了密码页

 

7.计费页

1.准备工作

微信小程序当然属于腾讯大佬的（给大佬递茶）：微信小程序开发者工具，腾讯开放了小程序个人开发平台，只需要一个微信号就可以成为小程序开发者了。

2.小程序页面

打开小程序开发者工具，用微信扫码登录，创建一个默认的小程序。界面是酱的：

 

小程序开发者工具页面

pages文件夹下存放着小程序所有的业务页面；

index文件夹就是一个页面，index.wxml是页面的结构文件，类似html。

index.wxss是页面的样式，其实就是css；index.js是页面的逻辑，数据请求与渲染都是都在这个页面完成。

logs文件夹存放着小程序开发日志，目前暂时用不到。

utils.js可以编写自己的JavaScript插件。

app.js处理全局的一些逻辑，比如定义全局变量存放获取的用户信息，这样每个页面都可以获取用户信息。

app.json 是全局配置文件，比如设置标题栏的背景色等。

app.wxss 存放页面的公共样式，如果多个页面需要用到同一样式，就可以写在这里。

项目按钮显示预览二维码，用于真机调试。必须真机调试测试代码

3.创建页面结构

上一节已经分析了默认的文件结构以及它们的功能，现在我们要创建ofo小程序所需要的页面。

1.删除pages下默认的index文件夹，logs/utils文件夹可选择性删除

2.在与pages同级目录下创建images文件夹，存放页面需要用到的图标，下载图标

3.本小程序不需要在app.js里面编写内容，可以注释这里面的代码

4.在app.json里，删掉默认代码，编写如下代码(app.json文件里不能有任何注释，这里是为了描述页面功能更直观)：

{ "pages":[ "pages/index/index", // 地图页 "pages/warn/index", // 车辆报障页 "pages/scanresult/index", // 扫码成功页 "pages/billing/index", // 开始计费页 "pages/my/index", // 账户页 "pages/wallet/index", // 钱包页 "pages/charge/index", // 充值页 "pages/logs/logs" // 日志页 ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#b9dd08", // 标题栏背景色 "navigationBarTitleText": "ofo 共享单车", // 标题栏文字 "navigationBarTextStyle":"black" // 标题栏文字样式 } }