微信小程序｜工具安装+目录说明｜基于最新版1.0开发工具教程分享 _生活知道

iKcamp官网：
访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。
包含：文章、视频、源代码
第一章：小程序初级入门教程工具安装
在上一节第 8 步所展示的页面中，可以点击开发者工具直接进入到下载页面，也可以直接访问官网下载地址。然后根据自己的设备选择相应的下载
安装过程不再复述，一路默认。
下载开发工具
§ 小程序工具起手此教程选择的工具为 mac 平台版本，没差
打开安装好的微信web开发者工具，需要用管理员或开发者的微信账号扫码登录。管理员账号是上一节第 6 步中注册 appID 时，绑定的微信账号。开发者账号可在上一节第 8 步中的添加开发者中设置
(二维码自动识别)
２. 登录成功后，选择本地小程序项目，然后添加项目
3. 如果没有注册 appID，也可以开发小程序项目，但部分功能会受限，比如在手机上预览。在这里，我们已经有了 appID
4. 添加成功后，我们的项目会在微信web开发者工具中自动打开并启动，可以在此工具中对代码进行修改、调试、断点、预览，文件有修改的话，项目会实时更新。
目录说明
项目生成后微信小程序云开发，会看到如下结构的目录文件：
【微信小程序｜工具安装+目录说明｜基于最新版1.0开发工具教程分享】├─ pages/│ ├─ index/│ ├─ index.js│ ├─ index.wxml│ ├─ index.wxss│ ├─ logs/│ ├─ logs.js│ ├─ logs.json│ ├─ logs.wxml│ ├─ logs.wxss├── utils/ │ ├─ util.js├── app.js // 必备文件 ├── app.json // 必备文件├── app.wxss
先看下最外层的三个文件：app.js 、 app.json 、 app.wxss
app.js

文章插图
小程序的主入口文件，类似于我们在模块加载器时代（requirejs/seajs）常常会码一个 main.js 来作为程序的启动入口。如果你有接触过 node – express 技术栈微信小程序云开发，理解起来会更贴切。注意：文件名不可更改
我们可以在 app.js 里面对小程序在不同生命周期段进行处理，设置小程序里面的全局变量（比如只请求一次公用的数据，让所有的页面都能用）。微信平台 app.js 说明文档
2. app.json
小程序的全局配置文件，比如设置小程序有哪几个页面组成（目前是 index和 logs）、窗口表现（背景色等）、设置网络超时时间、设置导航条样式等背景色。注意：该文件不可添加任何注释内容
微信平台 app.json 配置文档
3. app.wxss
小程序的全局样式文件，在小程序中，所有的样式文件不再是 .css 后缀，全都需要以 .wxss 作为后缀。与传统的 css 样式相比，wxss 支持 @import样式导入和像素单位自适应。
独立页面中的局部样式，请书写在相对的页面文件夹中，后面会有说明。微信平台 app.wxss 样式说明文档
小程序的页面文件
app.json 文件中配置了当前小程序的两个页面 pages/index/index 和 pages/logs/logs，可以看到，其实就是文件的路径+文件名组成。如果增加一个页面，需要在参数 pages 中把页面的地址配置进去。
细心的同学可能已经发现一个现象，每个页面文件夹，与里面的文件，名字都一样一样滴。是的，一般情况下，一个完整的页面需要 js 、wxss(css)、wxml(html)组成。
比如 index 页面，如果需要对 index 页面进行一些独立的配置，需要像 logs 一样，增加 index.json 文件来保存配置信息。
来看下 wxml 文件与 html 文件的区别
{{userInfo.nickName}}{{motto}}
传统的 html 文件由各种各样的标签组成，而在 wxml 中，可用的标签元素并不多，可以看到这里涉及到了 view、image、text标签。
还有一些内置好的组件标签，自带样式和特性，详见官方文档
页面样式表 index.wxss
作用域只在当前页面生效，它可以覆盖 app.wxss 里面的样式规则。可以看到，与平时我们用的样式文件基本没差：
/**index.wxss**/.userinfo { display: flex; flex-direction: column; align-items: center;}.userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%;}.userinfo-nickname { color: #aaa;}.usermotto { margin-top: 200px;}
页面脚本文件 index.js
跟 app.js 一样，包含了一个页面的生命周期，声明并处理数据，响应页面交互事件等。
//index.js//获取应用实例const app = getApp()Page({ data: { motto: 'Hello World', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo') }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { if (app.globalData.userInfo) { this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if (this.data.canIUse){ // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 app.userInfoReadyCallback = res => { this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } } else { // 在没有 open-type=getUserInfo 版本的兼容处理 wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) } }, getUserInfo: function(e) { console.log(e) app.globalData.userInfo = e.detail.userInfo this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) }})
下期更新内容：小程序初级入门教程－小试牛刀+发布流程
iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。
本文到此结束，希望对大家有所帮助！

微信小程序｜工具安装+目录说明｜基于最新版1.0开发工具教程分享

猜你喜欢