微信开发者工具的安装和利用以及小程序的创建和资源目录先容（最全！！）
一、安装开发者工具1.1. 相识微信开发者工具
https://img-blog.csdnimg.cn/img_convert/da4d39cb341a0eab7fa1c68ad9fedf32.webp?x-oss-process=image/format,png
1.2. 下载
保举下载和安装最新的稳定版(Stable Build)的微信开发者工具，
下载页面的链接如下
https://img-blog.csdnimg.cn/img_convert/ae80e679f1d4499ca85ed2eca459a564.webp?x-oss-process=image/format,png
1.3. 安装
一路下一步即可，保举自界说安装目录
https://img-blog.csdnimg.cn/img_convert/4d006f0106b58402895120846982ed09.webp?x-oss-process=image/format,png
二、利用开发者工具
2.1. 扫码登录开发者工具
相干：小程序账号注册登录和AppID的获取
2.2. 设置外观和代理
https://img-blog.csdnimg.cn/img_convert/56ef0295bb1d9f9aa612cf7642b859ad.webp?x-oss-process=image/format,png
https://img-blog.csdnimg.cn/img_convert/dd242b0870f73715bb73e83f2c5c651f.webp?x-oss-process=image/format,png
https://img-blog.csdnimg.cn/img_convert/2085c0342f6bc28507cc34cf5e1b1d61.webp?x-oss-process=image/format,png
三、创建小程序项目
3.1. 点击加号按钮
https://img-blog.csdnimg.cn/img_convert/5667e9b9245b6de84bc3923e05aafe82.webp?x-oss-process=image/format,png
3.2. 填写项目信息并选择模板
相干：小程序账号注册登录和AppID的获取
https://img-blog.csdnimg.cn/img_convert/6e22d92b6535766fddbc75f90c6306d9.webp?x-oss-process=image/format,png
3.3. 项目创建完成
https://img-blog.csdnimg.cn/img_convert/72a340f07778edc9b6af8318158ac25d.webp?x-oss-process=image/format,png
四、查看项目效果
4.1. 在模仿器上查看项目效果
https://img-blog.csdnimg.cn/img_convert/41eccdbdf86963fb7ca0d5943f1e6504.webp?x-oss-process=image/format,png
4.2. 在真机上预览项目效果
https://img-blog.csdnimg.cn/img_convert/651059274dd47037b6980ecc2c65b66f.webp?x-oss-process=image/format,png
五、主界面的五个部门
https://img-blog.csdnimg.cn/img_convert/d54f8bc6b76cc5a56acf7498c37b50dd.webp?x-oss-process=image/format,png
六、小程序代码的目录结构
6.1. 相识项目的基本构成结构
https://img-blog.csdnimg.cn/img_convert/863971ccb894116a759d4c89d749bab2.webp?x-oss-process=image/format,png
https://img-blog.csdnimg.cn/img_convert/2d1054dbabd4e6684ae282e1450f4ce1.webp?x-oss-process=image/format,png
6.2. 小程序页面的构成部门
小程序官方发起把全部小程序的页面，都存放在 pages 目录中，以单独的文件夹存在，如图所示：
https://img-blog.csdnimg.cn/img_convert/b629da139cedbb97d59bf7691f9077b0.webp?x-oss-process=image/format,png
6.3. JSON设置文件
https://img-blog.csdnimg.cn/img_convert/e784539f081807ac50d2ccdfbe1705be.webp?x-oss-process=image/format,png
6.3.1. app.json 文件
https://img-blog.csdnimg.cn/img_convert/9e43c4de3dafead605207d65962bc802.webp?x-oss-process=image/format,png
6.3.2. project.config.json 文件
https://img-blog.csdnimg.cn/img_convert/8736a6317f4842f99fbb666f39d7651f.webp?x-oss-process=image/format,png
6.3.3. sitemap.json文件
https://img-blog.csdnimg.cn/img_convert/fce808542c4f3eee64ad0d42d7b085fb.webp?x-oss-process=image/format,png
https://img-blog.csdnimg.cn/img_convert/80400a02083db1dd480fdc0dfa91ee4e.webp?x-oss-process=image/format,png
6.3.4. 页面的.json设置文件
https://img-blog.csdnimg.cn/img_convert/be4d51e6629e8a26ad45794ac98a58c4.webp?x-oss-process=image/format,png
6.4. 页面的.wxml文件
6.4.1. 什么是WXML
https://img-blog.csdnimg.cn/img_convert/1dabe9ed48413565bac4d75297fe2c22.webp?x-oss-process=image/format,png
6.4.2. WXML和HTML的区别
https://img-blog.csdnimg.cn/img_convert/f085bd2af0b8e2cc87e88038549a0890.webp?x-oss-process=image/format,png
6.5. 项目的.wxss文件
6.5.1. 什么是WXSS
https://img-blog.csdnimg.cn/img_convert/d62e6e44d1b36a05d64e6b9e17b733f3.webp?x-oss-process=image/format,png
6.5.2. WXSS和 CSS的区别
https://img-blog.csdnimg.cn/img_convert/f76ce79d8a22c5922caa7fb3942a9ac9.webp?x-oss-process=image/format,png
6.6. 项目的.js文件
一个项目仅仅提供界面展示是不够的，在小程序中，我们通过js文件来处置惩罚用户的利用。比方: 相应用户的点击、获取用户的位置等等。
https://img-blog.csdnimg.cn/img_convert/90c806264ef15404c1bed1f6f5c20be3.webp?x-oss-process=image/format,png
七、快速新建小程序页面
https://img-blog.csdnimg.cn/img_convert/aa9a32a34ab824fd495591e2bdca397e.webp?x-oss-process=image/format,png
八、修改项目首页
https://img-blog.csdnimg.cn/img_convert/466a12a752e4452b35afafcbf3966787.webp?x-oss-process=image/format,png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]