相关链接

小程序注册
先登录后，然后在设置-开发者设置中找到小程序的AppId
下载小程序的开发者工具

开发者工具下载后直接通过扫码登录

然后可以选择小程序项目或公众号网页项目

这里我们选择小程序项目，填入申请到的AppId,然后给项目取个名字，然后选择quickStart项目（项目所处文件夹为空时才有），你就得到了一个范例项目,如下所示：

项目代码结构分析

• .json 后缀的 JSON 配置文件
• .wxml 后缀的 WXML 模板文件
• .wxss 后缀的 WXSS 样式文件
• .js 后缀的 JS 脚本逻辑文件

app.json

是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等.范例如下所示

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等

小程序的配置

工具配置 project.config.json

主要是做一些个性化的配置，例如界面颜色、编译配置等等

页面配置 page.json

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可,但是实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

WXML 模板

从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。打开pages/index/index.wxml，你会看到以下的内容:

<!--index.wxml-->
<view class="container">
 
  <view class="userinfo">
    
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
 
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  
  </view>
  
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>

</view>

WXML更多

WXSS 样式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。
新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。此外 WXSS 仅支持部分 CSS 选择器

WXSS更多

JS 交互逻辑

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

点击 button 按钮的时候，我们希望把界面上 msg 显示成 “Hello World”，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

响应用户的操作就是这么简单，更详细的事件可以参考文档

API文档

总结

本文只是起到抛砖引玉的作用，真正想掌握还需通过不断的实践巩固才行