iKcamp官网：http://www.ikcamp.com访问官网全部免费阅读分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。包括：文章、视频、源码第一章：小程序初级入门教程工具安装在上一节第8步的页面。可以点击开发者工具直接进入下载页面，也可以直接访问官网下载地址。然后根据自己的设备选择相应的下载安装过程，安装过程不再重复，默认一路。下载开发工具§小程序工具上手本教程选择的工具是mac平台版，安装好的微信网页开发者工具很容易打开，需要管理员或开发者扫码登录微信账号。管理员账号就是上一节第6步注册appID时绑定的微信账号。开发者账号可以在上一节第8步的添加开发者中设置。登录成功后，选择本地小程序项目，然后添加项目。如果不注册appID，也可以开发小程序项目，但会限制部分功能。比如在手机上预览。到这里，我们已经成功添加了appID，我们的项目会在微信web开发者工具中自动打开并启动，代码可以在这个工具中修改、调试、断点、预览。如果文件被修改，项目会实时更新。目录说明工程生成后，会看到一个目录文件，结构如下：├─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.wxssapp.js小程序的主要入口文件，类似我们模块加载器时代的（requirejs/seajs）经常会编写一个main.js作为程序的启动入口。如果接触过node-express技术栈，理解起来会比较合适。注意：文件名不可更改我们可以在app.js中对小程序在不同的生命周期段进行处理，在小程序中设置全局变量（比如只请求一次公共数据，以便所有页面都可以使用）。微信平台app.js文档app.json小程序的全局配置文件，比如设置小程序由哪些页面组成（目前有索引和日志）、窗口表现（背景颜色等）、设置网络超时、设置导航背景颜色，例如条形样式。注意：不要在该文件中添加任何注释微信平台app.json配置文件app.wxss小程序的全局样式文件。在小程序中，所有样式文件都没有.css后缀，都需要加上.wxss后缀。与传统的css样式相比，wxss支持@import样式导入和像素单元适配。独立页面中的部分样式，请写在相对页面文件夹中，后面会说明。微信平台app.wxss风格描述文件小程序的页面文件app.json配置了当前小程序的两个pages/index/index和pages/logs/logs。可以看到其实就是文件的路径+文件名组成。如果添加页面，需要在参数pages中配置页面的地址。细心的同学可能发现了一个现象，每个page文件夹都和里面的文件同名。是的，一般情况下，一个完整的页面需要js、wxss(css)、wxml(html)。比如在index页面，如果需要在index页面进行一些独立的配置，就需要添加一个index.json文件，像日志一样保存配置信息。看看wxml文件和html文件的区别获取头像昵称{{userInfo.nickName}}{{motto}}传统的html文件是由各种标签组成的，而在wxml中，可用的标签并不多元素。可以看到这里涉及到view、image、text标签。View相当于div，你可以这样理解。image相当于img，这个你应该明白了。text很明显，用来标记文本的标签，既然是文本，就一定是行级元素。还有一些内置的组件标签具有自己的样式和特性。具体见官方文档页面样式表。index.wxss作用域只对当前页面生效，可以覆盖app.wxss中的样式规则。可以看出和我们平时使用的样式文件基本一样：/**index.wxss**/.userinfo{display:flex;弹性方向：列；对齐项目：中心；}.userinfo-avatar{宽度：128rpx；高度：128rpx；保证金：20rpx；border-radius:50%;}.userinfo-nickname{color:#aaa;}.usermotto{margin-top:200px;}页面脚本文件index.js和app.js同样包含了一个页面的生命周期，声明和处理数据，响应页面交互事件等。//index.js//获取应用实例constapp=getApp()Page({data:{motto:'HelloWorld',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})}elseif(this.data.canIUse){//由于getUserInfo是网络请求，可能会在Page.onLoad之后返回//所以添加回调这里为了防止这种情况app.userInfoReadyCallback=res=>{this.setData({userInfo:res.userInfo,hasUserInfo:true})}}else{//没有open-type=getUserInfo版本的兼容处理wx.getUserInfo({success:res=>{app.globalData.userInfo=res.userInfothis.setData({userInfo:res.userInfo,hasUserInfo:true})}})}},getUserInfo:function(e){console.log(e)app.globalData.userInfo=e.detail.userInfothis.setData({userInfo:e.detail.userInfo,hasUserInfo:true})}})下一次更新：小初学者程序员教程-小试+发布流程iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当上架相关文章：听说2017年你想写前端？前端开发者指南（2017）翻译系列|《你不知道的JS》妹子篇|JavaScript轻量级函数式编程iKcamp最新活动报名地址：http://www.huodongxing.com/ev...
