工作的准备

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

项目效果

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

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

主页面

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

搜索页面

将页面划分为搜索栏，热搜词，推荐列表，搜索结果列表

详情页面

滑动窗口，领取优惠弹窗。

遇见各种问题

数据变动后ui没变

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

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

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

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

路由参数不存在

1. 检查在app.json中pages字段是否有新建的page，如果是通过微信开发者工具右键创建Page的话默认是会自动添加的。
2. 😬😬在路由跳转中传入参数是需要采用相对路径的，直接用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。

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

版本管理

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

代码混淆

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

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

其他

    本小程序比较简单，ui也是借鉴一些电商APP上的ui，要是想一比一还原就需要耗费很多时间和精力啦，仅作为记录第一次开发小程序的一些经验，也欢迎各位大佬能指点一下。