一、认识微信小程序

微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户在微信扫一扫或搜一下即可打开应用。常见的有：微信小程序、支付宝小程序、百度小程序、QQ小程序等。热门的第三方小程序：拼多多、滴滴、斗地主等。

二、开发准备

注册账号注册地址
获取AppID：可登录微信公众平台进入“开发” -- “开发设置” 获取AppID
下载开发工具下载地址
登录微信开发者工具
新建小程序项目
填写项目信息
开始编写

三、结构目录

小程序文件结构和传统web对比

结构	传统web	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	Javascript	Javascript
配置	无	JSON

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。普通快速启动项目里边的 app.json 配置

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

字段的含义

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

页面配置 page.json

这里的 page.json 其实用来表示页面目录下的 page.json 这类和小程序页面相关的配置。

开发者可以独立定义每个页面的一些属性，如顶部颜色、是否允许下拉刷新等等。

页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

sitemap 配置

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引。

四、模板语法

 <view> {{ message }} </view> //普通写法
 
 <view id="item-{{id}}"> </view>  //组件属性
 
 <checkbox checked="{{false}}"></checkbox> //bool类型
 
 <view hidden="{{flag ? true : false}}"> Hidden </view> // 三元运算
 
 <view>{{ a + b}} + {{c}}</view> //算数运算
 
 <view wx:if="{{length > 10}}"> </view> //if判断
 
 <view wx:for="{{arr}}" wx:key="id">
  {{index}}: {{item.name}}
  </view> //for循环数据渲染数据
  
 <block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>  //渲染一个包含多节点的结构快 block最终不会变成真正的dom元素

Page({
  data: {
    message: 'Hello !',
    id: 0,
    a:3,
    b:2,
    c:1，
    arr:[
    {
      id:1,
      name:'酸奶'
    },{
      id:2,
      name:'牛奶'
    }
    ]
  }
})

小程序事件绑定

<input bindinput="handleInput" />

page({
  //绑定的事件
  handleInput :function(e){
     console.log('绑定的值')
      // {item:100}
     console.log(e.currentTarget.dataset)      
    // 输入框的值
     console.log(e.detail.value);
  }
 })

事件传值通过标签自定义属性的方式和 value

<input bindinput="handleInput" data-item="100" />

五、样式WXSS

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。与 CSS 相比，WXSS 扩展的特性有：

响应式长度单位 rpx
样式导入

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

注意小程序不支持通配符 *

微信小程序的开发步骤详解

一、认识微信小程序

二、开发准备

三、结构目录

四、模板语法

五、样式WXSS