微 信小程序开发| “朝闻道”知识分享大赛

[Thomas Wade]

这是我参加朝闻道知识分享大赛的102 篇文章

制作空白模板代码包

由于目前新建项目时没有空白模板选项了，开发者每次新建项目后还得花大量重复的时间去清除里面不需要的代码才能开始编写自己的内容，并且还容易少删或误删里面的内容导致代码冲突报错，因此我们不妨制作一个自己专用的空白模板代码包，方便后续直接导入即可使用。

1. 清理模板代码 首先需要对现有的模板代码进行清理工作，删除不需要的文件和代码。具体操作步骤如下：

删除不需要的小程序页面

首先找到app.json文件，其中的第2-5行代码片段修改如下：

"pages":[

     "pages/index/index",

     "pages/logs/logs"

 ],

↓↓↓

"pages":[

     "pages/index/index"  

],

我们需要删除log页面，只保留首页index继续使用即可

此时就可以展开项目中的pages目录，对着logs目录点击鼠标右键选择“删除”选项将其放入电脑的回收站以便误删可以恢复。（注：如果确定不要恢复了，也可以对着logs目录点击鼠标右键选择“在资源管理器中显示“，然后就可以选中直接Shift+Del快捷键永久删除。） 注意：删除页面时一定要先删掉app.json中代码登记的页面信息，再去实际删除对应的目录才可以成功，若不改app.json代码就直接去删除目录和文件会有残留。

2) 删除不需要的代码

接下来我们就可以删除不需要的代码了，具体操作如下： app.wxss文件：该文件用于规定所有页面的全局样式，删除里面所有代码（第一行是注释可保留）； app.js文件：该文件用于注册小程序项目的生命周期函数以及存放公共变量，先删除里面所有代码（第一行是注释可保留），然后在英文打字法状态下输入app弹出代码提示框，键盘上下方向键选中第3行按回车键，让其自动生成空白生命周期函数。

 删除不需要的代码cont

. index.wxss文件：该文件在pages目录下属的index目录中，用于规定index页面的样式，删除里面所有代码（第一行是注释可保留）；

index.wxml文件：该文件在pages目录下属的index目录中，用于规定index页面的结构和组件内容，删除里面所有代码（第一行是注释可保留）；

index.js文件：该文件在pages目录下属的index目录中，用于规定index页面的逻辑功能，先删除里面所有代码（第一行是注释可保留），然后在英文打字法状态下输入page弹出代码提示框，键盘上下方向键选中第3行按回车键，让其自动生成空白生命周期函数。

3) 删除其他文件 根目录中还有一个utils文件夹，这是用于存放一些公共函数的，当前不需要也可以整个删除。后续开发者完全可以自己新建自定义名称的目录，例如在根目录里创建images目录用于存放图片素材。 此时就得到了一份干净无内容的模板代码了，本次开发就在该项目中继续进行，顺便将整个文件夹复制一份换个名字保存（例如templateDemo）以备后续新建项目时可以直接导入使用。

2.导入代码包

微信开发工具的导入功能可以直接导入现成的项目代码包用于学习或二次开发，以本节完成的templateDemo为例，具体操作步骤如下： 新建或选择一个已存在的文件夹作为存放小程序项目的总文件夹，文件夹的路径、名称均可由开发者自定义； 复制一份模板代码templateDemo代码包到小程序项目存放文件夹中，并为其重命名（例如改为testDemo），同一个文件夹下的项目代码包不重名即可。 打开微信开发者工具，扫码登录后左侧栏菜单选择“小程序项目”——“小程序”进入小程序管理页面；如果之前已经用微信开发者工具打开了别的项目，可以左上角菜单栏第一个选项“项目”——“关闭当前项目”也同样可以回到小程序管理页面。