做一个微信小程序给TA

# 情人节 可送给女朋友 的礼物，或者作为两人的纪念 

# 效果展示：微信搜索 “王美美与曾小帅”  小程序即可查看效果

# 微信小程序入门——使用免费后端云（Bmod）搭建留言板与纪念日间隔天数（部分源码）

## 从注册小程序到小程序的上线发布

## 文后提供思维导图

## 必看！！墙裂推荐参考 小程序开发文档，https://developers.weixin.qq.com/miniprogram/dev/framework/按照里面的开发指南一步步走一遍流程，到最后你基本会明白小程序大致的一个开发流程以及基本的开发能力（基于有一定的编程基础）。

## 此外，本文参考了书籍《微信小程序开发与运营》朱继宏  文后提供思维导图

                                        ## 全文六步走                                        #### 一、开发前准备，注册小程序                                        #### 二、小程序的理解                                        #### 三、实现的功能与效果演示（部分源码）                                        #### 四、（Bmod）比目系统，快速、简便开发后台                                        #### 五、安装Bmod的SDK                                        #### 六、开发后，审核、发布小程序                                        #### 七、有感                                        #### 八、思维导图

一、开发前准备，注册小程序

注册小程序  微信公众平台https://mp.weixin.qq.com/

立即注册→小程序→走完一套流程……

二、小程序的理解

2.1、安装开发工具：微信开发者工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2.2、使用微信开发者工具 完成小程序的源码开发

2.2.1、登录微信公众平台https://mp.weixin.qq.com/，单击左侧的菜单栏中的设置→然后在基本设置中找到 AppID(小程序ID)，一串字符来的

2.2.2、打开微信开发者工具→新建项目→将前面得到AppID(小程序ID)，填入到对应的AppID项中

在后面的开发中

便可以直接通过 微信开发工具，将开发的中间版本上传，然后通过 微信公众平台 控制进行测试、体验、或者发布了。

2.3、小程序的理解

简而言之，每个页面中：js文件用来编写一些完成数据的逻辑操作处理的函数、语句。Wxml类似于html用于描述页面存在哪些组件，组件遵循哪些样式描述（有什么属性，会触发什么js函数，长什么样子，在页面中的布局位置等等），wxss类似于css，编写一些样式类别，供给wxml调用去描述组件。主体文件（根目录下面app打头的三个文件）也是类似的，只不过他们描述的东西是关于整个小程序的，而不仅仅针对于一个特定的页面。

然后页面渲染、呈现与数据逻辑更新、处理之间的联系需要通过事件机制来触发、完成。

2.3.1、小程序的文件说明

新建一个项目之后，会自动生成下图中的文件列表，可以总结为”一二三”

“一个project.config.json文件”，包含项目名称、appid等相关信息的配置文件，工具上做的任何配置都会写入到这个文件，只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置。

“两个文件夹目录”，pages目录：其下面每个子目录对应一个页面的相关文件，通常一个页面包含四个同名，不同后缀名的.wxml、.wxss、.js、.json页面文件，如图所示。

utils目录:存放一些公共的  js  文件,假如某个页面需要用到该函数，将其引入后，即可直接使用，图片、音频等资源类文件，可单独创建子目录来存放（建议将该子目录建在pages目录下）。

“三个app开头的主体文件”：1.app.js:小程序逻辑文件，主要用来注册小程序的全局实例。 2.app.json：   小程序公共设置文件，配置小程序全局设置，其中的pages字段，用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。其中的window字段定义小程序所有页面的顶部背景颜色，文字颜色定义等 其他配置项细节可以参考文档 小程序的配置 app.json 。https://developers.weixin.qq.com/miniprogram/dev/framework/config.html      3.app.wxss  小程序主样式表文件，类似于  HTML 中的 css 文件

2.3.2、小程序的开发框架

MINA框架

  逻辑层： 事务逻辑处理的地方，相当于所有.js文件的集合。小程序在逻辑层对数据进行处理，然后返回给视图层，同时接受视图层的事件反馈。

视图层：   由wxml和wxss编写，由组件进行展示，.wxml用来描述页面的结构，.wxss用来描述页面的样式

数据层：

     页面临时数据或缓存

        setData函数

     文件存储（本地存储）

        使用数据API接口

           wx.getStorage：用于获取本地数据缓存

           wx.setStorage：用于设置本地数据缓存

           wx.clearStorage：用于清理本地数据缓存

     网络存储或调用

        wx.request

           用于发起网络请求

        wx.uploadFile

           用于上传文件

        wx.downloadFile

           用于下载文件，调用URL的API接口

        wx.navigateTo

               在新窗口中打开页面

2.3.3、小程序的事件

对用户在UI界面进行的操作进行及时反馈的必备属性。

UI界面的程序需要和用户互动，例如用户可能会点击你界面上某个按钮，又或者长按某个区域，这类反馈应该通知给开发者的逻辑层，需要将对应的处理状态呈现给用户。

有些时候程序上的“行为反馈”不一定是用户主动触发的，例如我们在视频video播放的过程中，播放进度是会一直变化的，这种反馈也应该通知给开发者做相应的逻辑处理。在小程序里边，我们把这种“用户在渲染层的行为反馈”以及“组件的部分状态反馈”抽象为渲染层传递给逻辑层的“事件”，如图所示。

详细的介绍，请查看https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000846df9a03909b0086a50025180a

2.3.4、小程序的生命周期

可简单认为：最早先app.js文件，运行App实例，然后将App这个实例赋给所有js文件中的getApp() 。然后在回到App中的onLaunch函数，然后进入到某一个特定页面时候，就会触发相应页面.js文件中的onLoad函数（但只会触发一次，除非销毁掉该页面，再次进入该页面，则会再次触发onLoad），紧接着是相应页面的onShow，其余的见名知意，大概知道什么时候回触发什么函数，只要将特定状态需要执行的语句写入函数中即可。

三、实现的功能与效果演示（部分源码）

实现的功能及效果演示：

1.间隔天数计算

2.简易时钟

3.电子相册

4.土味情话留言板（点击相应显示下一句）

5.留言板的密码验证、密码修改、留言发送、输入框触发等等

3.1、间隔天数计算

   将日期转成毫秒数，计算差值之后换算成天数即可，便可得到两个日期的间隔天数。

可以使用picker组件来改进此功能，实现用户选择两个间隔日期，自动计算间隔天数的功能。

在页面js文件中的关键源码如下：

3.2、简易时钟

设置一秒钟的定时器，递归调用自身，完成一秒更新一次的简易时钟，

在页面js文件中的关键源码如下：

3.3、电子相册

使用swiper组件，设置自动滑动，切换等相应属性，完成一个自动切换的电子相册。

在页面wxml文件中的关键源码：

3.4、土味情话留言板（点击相应显示下一句）

这里使用到了Bmod后端云（比目系统）创建了后台来存储留言信息。其实只是使用到了很简单的数据表增删查改操作，哦，甚至连删除操作都没有用到。

 点击后

在页面wxml文件中的关键源码如下：

在页面js文件中的关键源码如下：

3.5、留言板的密码验证、密码修改、留言发送、输入框触发等等

这里使用到了Bmod后端云（比目系统）。

点击才会出现输入框

其中js逻辑处理获取输入框中的信息时，使用了事件机制。

为了应对用户的各种输入情况，在实现过程中做了较多的判断，使得代码较为繁琐，就不贴出来了。

四、（Bmod）比目系统，快速、简便开发后台

4.1、注册Bmod后端云

4.2、登录以后，创建应用

按需选择，

4.3、完成授权

4.4、登录微信公众平台获取对应小程序的AppID和AppSecret秘钥（这两个东西登录微信公众平台获取）

4.5、给Bmod后端云中应用项目配置小程序AppID和AppSecret秘钥

4.6、登录Bmod获取“微信小程序服务器域名”，登录微信公众平台，在服务器域名中配置“安全域名”

五、安装Bmod的SDK以及Bmod新建后台数据库

 （只做简单讲解  具体请参考Bmod 官方文档http://doc.bmob.cn/data/wechat_app_new/index.html）

在此次的小程序中，使用了源码引入，（尝试过其他引入方式，并不能成功引入）

5.1、安装Bmod的SDK

5.1.1、下载SDK下载

https://github.com/bmob/hydrogen-js-sdk/

5.1.2、复制源码文件：

解压压缩包，将hydrogen-js-sdk-master \ src 里面的整个lib文件夹复制到 小程序所在的根目录下（与三个app主体文件同一个目录下）

5.1.3、在小程序中完成源码引入：

在app.js文件中的关键源码：

5.1.4、随后，某一文件想使用后端时，只需源码引入，在文件最开始加一句

//源码引入Bmod

var Bmob = require('../../lib/app.js');

文件后续的语句中，即可使用Bmod提供的函数访问后台数据库。

（函数使用请参考Bmod 官方文档 数据表操作 http://doc.bmob.cn/data/wechat_app_new/index.html#_15 ）

5.2、在Bmod后端云新建一张表

登录Bmod后端云→选择需要建表的应用→云数据库→添加表→输入名字及表的注释→添加列…..等等操作，非常简单，不赘述。当想手动添加一条数据库记录时，点击“添加”行即可

六、开发后，审核、发布小程序

6.1、首先在微信开发者工具上完成开发，点击工具右上角的上传

6.2、登录微信公众平台→版本管理→开发版本→提交审核→填写相关信息→等待审核通过后，会出现审核版本→此时点击发布即可（按需选择全量发布还是其他）→去微信客户端搜索你的小程序吧，你会发现自己的成果可以用了呢。

七、有感

   女朋友总抱怨我没有仪式感，其实又怎需要她说，我也知道自己似乎缺少了些仪式感呀。于是想趁着我们接吻四周年纪念日，（啊哈哈哈哈，其实这个吻也算是正式宣告我们再一起了吧，即使我们都没有正式地跟对方直抒胸臆，正式表白什么的。）就写一个小程序来记录一下吧。此外，觉得自己也应该做一下爬坑的记录，一来希望自己的胡言乱语能起到提醒后人的作用，二来以后忘记了，还可作为一种电子笔记，提醒自己。

八、思维导图

Pdf版本和png图片版本

链接:https://pan.baidu.com/s/1BuFxLPJ3YV6J4X0RYx_AGg 

密码:678a