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

项目成果

作为新手，当然一开始不用考虑各种组件框架，直接使用原生的小程序进行开发就可以了✊✊✊。

由于是移动端，页面UI只需要使用rpx配合flex布局就可以应付大部分场景，不需要额外适配。本方案比较简单，所以组件只需要view、text、-view即可。

主页

将页面分为搜索栏、插图、分区和推荐列表。

搜索页面

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

详细信息页面

滑动窗口即可收到折扣弹窗。

遇到各种问题数据改变后UI不变化

这通常是因为数据的变更没有放在this.({data: new data})中，只有通过this.data.data = new data才进行赋值。

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

子组件是-view，所以不能简单的用:来覆盖，具体方法如下：

父组件设置：；如果是横向的 = 0；如果是纵向的 = 0；在子组件外面包一层子组件。路由参数不存在，检查app.json中字段是否有新增页面，如果通过微信开发者工具右键创建页面，会默认自动添加。路由跳转中传递参数时，必须使用相对路径，直接使用//是无法正确跳转的。

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

第三方库依赖项

通过 npm init -y 在小程序项目中生成一个 .json 文件（如果有的话就不用管了），上面说了小程序源码放在 src 文件夹下，所以命令行目录要 cd 到 src 下，比如 D:\\\src。

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

小程序不提供版本管理，需要自己在or里创建一个仓库，这个很重要，上次尝试混淆代码，上传到微信公众平台，下次改的时候没有备份，代码全被混淆了，只能重写。

代码混淆

由于小程序要经过上传、审核、发布等环节，需要上传到微信的服务器，再由微信分发给用户。为了增加逆向小程序源代码然后出售的人的难度，会使用代码混淆来阻止一些不熟悉逆向的人。

npm -g - 在小程序源码中找到..json文件，在字段中添加“les”:,“”.如果不添加这两个字段，混淆后的代码在微信开发者工具中无法编译成功，因为微信开发者工具采用的是静态依赖分析，代码混淆会阻止进行依赖分析而导致错误。在命令行中逐个输入-xx.js，然后删除源文件，将文件改名为xxx-.js。这个过程有点麻烦，所以我就写了两个js脚本。在D:\\目录下运行node.js上传就行了。上传完还原后再运行node.js。其他

这个小程序比较简单，UI 借鉴了一些电商的，如果要一一还原的话，需要花费不少时间和精力，这里只是记录一下第一次开发小程序的一些经验，欢迎大家多多指教。