两天撸一个优惠券小程序，记录下开发的小小经验-Toy模板网

这篇具有很好参考价值的文章主要介绍了两天撸一个优惠券小程序，记录下开发的小小经验。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

工作的准备

下载微信开发者工具😃😃
新建项目文件夹project，比如D:\workProject\project
在project下创建src目录放微信小程序的源码，.gitignore文件是用来git上传gitee上忽略一些文件用的，另外三个js文件时用来混淆小程序源码的脚本，将脚本和小程序源码分开是为了脚本更好处理混淆过程。
通过微信开发者工具在src文件夹中创建微信小程序，最终形成如下目录结构😘😘

两天撸一个优惠券小程序，记录下开发的小小经验

项目效果

作为新手，当然一开始先不考虑各种组件框架，仅仅采用原生小程序进行开发即可✊✊✊。

由于是移动端，页面ui只需要用rpx配合flex布局就可以胜任大部分场景了，不需要额外的做适配。本程序比较简单，所以组件仅需要view，input，text，scroll-view即可。

主页面

将页面划分搜索栏，配图，分区以及推荐列表。

两天撸一个优惠券小程序，记录下开发的小小经验

搜索页面

将页面划分为搜索栏，热搜词，推荐列表，搜索结果列表
两天撸一个优惠券小程序，记录下开发的小小经验

详情页面

滑动窗口，领取优惠弹窗。
两天撸一个优惠券小程序，记录下开发的小小经验

遇见各种问题

数据变动后ui没变

😬😬一般是因为数据变动没有放在this.setData({数据: 新数据})中，仅仅通过this.data.数据=新数据进行赋值。

父组件设置flex:1，子组件超出父组件范围导致溢出

子组件是scroll-view，所以不能简单的用overflow:hidden去遮住他，具体方法如下：

父组件设置position:relative;如果是横向就width = 0;如果是纵向就height = 0;
在子组件外包裹一层子组件

路由参数不存在

检查在app.json中pages字段是否有新建的page，如果是通过微信开发者工具右键创建Page的话默认是会自动添加的。
😬😬在路由跳转中传入参数是需要采用相对路径的，直接用pages/detail/detail是无法正确跳转的。

wx.navigateTo({
  url: `../../pages/detail/detail`,
  success: function (res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', item)
  }
});

第三方库依赖

在小程序项目中通过npm init -y生成package.json文件（若有那就不需要管），由于上述说到将小程序源码放在src文件夹下，所以命令行目录要cd到src上，比如D:\workProject\project\src。

终端命令 npm install
点击微信开发平台工具栏的工具 --> 构建npm
运行后，微信开发者工具会自动在项目中创建miniprogram_npm文件夹形成代码依赖，依赖的代码就在这个文件夹下，而不是在node_modules中，所以创建后删除node_modules是没关系的。

版本管理

小程序没有提供版本管理😓😓😓，需要自行在github或者gitee中创建仓库，这个很重要，上次尝试了代码混淆后上传到微信公众平台上，下次更改的时候又没有备份，全是混淆的代码，结果重写了😵😵。

代码混淆

由于小程序要经历上传、审查、发布阶段，需要上传到微信的服务器上，由微信再下发到用户上，为了给那些逆向小程序源码然后拿去卖的人增加点难度，采用代码混淆的方式劝退一部分不熟悉逆向的人。

npm install -g javascript-obfuscator
在小程序源码中找到project.config.json文件，在setting字段添加"ignoreUploadUnusedFiles": false,
“ignoreDevUnusedFiles”: false。👀如果不添加这两个字段的话，混淆后的代码不能在微信开发者工具编译成功，因为微信开发者工具采用的是静态依赖分析，代码混淆会让依赖分析分析不起来导致报错。
一个个在命令行中敲javascript-obfuscator xx.js然后删源文件然后重命名带xxx-obfuscated.js的文件，这个过程有点麻烦，👀干脆写了两个js脚本。在D:\workProject\project目录下直接运行node encrypt_src.js就可以上传了，上传完后还原回来，运行node rebuild_src.js就可以了。