小程序入门教程及实例

目录

1. 开发环境
2. 目录结构
3. WXML 组件
4. WXSS
5. 数据绑定
6. 条件渲染
7. 列表渲染
8. 模版
9. 事件
10. 引用
11. 路由传参
12. API
13. 实例 TodoList

1.开发环境

开发工具下载（ https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html ） 安装之后，和微信 web 开发者工具一样，扫码登录即可，不同的是，创建一个小程序需要填写 AppID ，如果没有 AppID 的话，点击‘无 AppID ’即可

2.目录结构

一个小程序由两部分组成：框架主体部分、框架页面部分

框架主体部分

框架主体部分包含三个文件，位于项目的根目录

1) app.js

//app.js//app.js
App({
  onLaunch: function () {
    // 当小程序初始化完成时，会触发 onLaunch （全局只触发一次）
    // 调用 API 从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  onShow: function() {
      // 当小程序启动，或从后台进入前台显示，会触发 onShow
  },
  onHide: function() {
      // 当小程序从前台进入后台，会触发 onHide
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

app.js 内调用了 App 函数（只能在 app.js 内调用）注册小程序实例，可以在这个文件中监听处理小程序的声明周期函数，并可以在此声明全局变量。 小程序提供了全局方法 getApp 返回小程序实例

var app = getApp() console.log(app.globalData) // {userInfo:null} 此外，还提供了 getCurrentPage 方法获取当前页面的实例， getCurrentPage 不能在 onLaunch 中调用，此时 page 尚未生成

2 ） app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "page/index/index",
      "text": "首页"
    }, {
      "pagePath": "page/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

此文件用来对小程序进行全局配置（ app.json 不得含有注释）

pages 配置页面路由，所有需要使用的页面都需要添加配置 window 设置页面窗口表现 tabBar 设置页面底部 tab 表现，其中 list 数组长度不超过 5 且至少为 2 networkTimeout 设置网络超时时间 debug 设置 debug 模式的开启 3 ） app.wxss 样式表

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

框架页面部分

框架页面部分包含四个文件

page.js ， page.json 分别对应于 app.js 和 app.json ，不同之处在于 page.js 中调用的是 Page 函数， page.json 中只能对本页的 window 进行配置，因此， page.json 中直接就是一个对象

{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
}

然后再看看 page.js

// page.js
Page({
  data: { 
   // 页面的初始数据
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面加载时
  },
  onReady: function() {
    // 页面渲染完成时
  },
  onShow: function() {
    // 页面显示时
  },
  onHide: function() {
    // 页面隐藏时
  },
  onUnload: function() {
    // 页面卸载时
  },
  // 自定义属性，使用 this 方法
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  }
})

3.WXML 组件

小程序中并没有 html 标签，而是提供了一系列 WXML 组件

view 视图容器 scroll-view 可滚动视图容器 swiper 滑块视图容器 icon 图标 text text progress progress button button checkbox-group 多项选择器，内部由多个 checkbox 组成 checkbox 多选项目 form form input input label label picker 滚动选择器，现支持三种选择器，通过 mode 来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器 radio-group 单项选择器，内部由多个 组成 radio 单选项目 slider 滑动选择器 switch 开关选择器 action-sheet action-sheet modal 模态弹窗 toast 消息提示框 loading 加载提示符 navigator 页面链接 audio audio image image video 视频 map 地图 canvas 画布 这应该是类似于 ng 中的组件，目前小程序并没有提供自定义组件的功能

4.WXSS

WXSS 用于描述 WXML 的样式表 为了适应各种屏幕， WXSS 扩展了尺寸单位 rpx （ responsive pixel ），规定屏幕宽度为 750rpx （ 20rem ） 另外， WXSS 并不支持所有 css 选择器，目前支持的选择器有

.class #id element element,element :after :before 5.数据绑定

数据绑定采用 “ Mustache ” 语法（双大括号）包裹变量

<view class="container"> <text>{{hello}}</text> </view>

//index.js//index.js Page({ data: { hello: 'Hello World' }, onLoad: function () { this.setData({ hello:'Hello World' }) } })

WXML 中的动态数据均来自对应 Page 的 data ，并且需要调用 setData 方法通知视图数据变化

6.条件渲染

使用 wx:if=”{{condition}}” 来判断是否需要渲染该代码块，同大多 MV*框架一样， if 是惰性的，即初始判断为 false 时，不会渲染该代码块

<view wx:if="{{condition}}"> True </view> 7.列表渲染

使用 wx:for 绑定一个数组， wx:for-index 可以指定数组当前下标的变量名（默认为 index ）， wx:for-item 可以指定数组当前元素的变量名（默认为 item ）

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}} </view> 8.模版

使用 name 属性定义一个 stemplate 模版，模版拥有自己的作用域

<template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view> </template>

使用 name 属性使用一个 stemplate 模版， data 属性传入模版所需的数据

< template is="msgItem" data="{{...item}}"></template> data

Page({ data: { item: { index: 0, msg: 'this is a template', time: '2016-09-15' } } }) 9.事件

支持事件

touchstart 手指触摸 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断，如来电提醒，弹窗 touchend 手指触摸动作结束 tap 手指触摸后离开 longtap 手指触摸后，超过 350ms 再离开 事件绑定

以 key-value 形式绑定事件 其中 key 为 bind 或 catch +事件名称，例如 bindtap=“ tapName ”（ bind 不阻止冒泡， catch 阻止事件向上冒泡） value 为函数名称

事件对象

type 事件类型 timeStamp 事件生成时的时间戳 target 触发事件的组件的一些属性值集合 id 、 dataset 、 offsetLeft,、 offsetTop currentTarget 当前组件的一些属性值集合 id 、 dataset 、 offsetLeft,、 offsetTop touches 触摸事件，触摸点信息的数组 pageX 、 pageY 、 clientX 、 clientY 、 screenX 、 screenY detail 特殊事件所携带的数据，如表单组件的提交事件会携带用户的输入 10.引用

WXML 提供两种文件引用方式 import 和 include import 可以在该文件中使用目标文件定义的 template ，但不能使用目标文件中 import 的其他 template

// index.wxml <import src="item.wxml"/> <template is="item" data="{{text: 'forbar'}}"/> include 可以将目标文件中除了

<include src="header.wxml"/> <view> body </view> <include src="footer.wxml"/>

<view> header </view>

<view> footer </view>

11.路由传参

一个 url 如下

<navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator> 在目标页的声明周期函数 onLoad 中传入 options 即可获取路由参数对象，另外 url 是相对的，不是 app.json 中定义的 url

Page({ onLoad: function(options) { this.setData({ title: options.title }) } })

1. API

框架提供丰富的微信原生 API ，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等，具体可查看官方文档

13.TodoList

最后是一个案例

显示任务 添加任务 删除任务 标记任务是否完成 计算任务总数和已完成的任务数量 index.wxml

<view class="input"> <input bindinput="bindKeyInput" placeholder="请输入任务名称" value="{{inputValue}}"/> <button bindtap="add">确定</button> </view> <view class="list"> <block wx:for="{{list}}"> <view> <checkbox-group bindchange="change" data-index="{{index}}"> <checkbox value="{{item.checked}}" checked="{{item.checked}}"/> </checkbox-group> <text>{{item.value}}</text><button bindtap="delete" data-index="{{index}}">删除</button> </view> </block> <view> {{complete}}个已完成 /{{list.length}}个任务 </view> </view>

其中 block 并不属于组件，不会在页面中渲染，仅作接收控制属性用

index. wxss

/**index.wxss**/
.input {
    padding: 20 rpx
}
.list view {
    padding: 10 rpx 20 rpx;
    overflow: hidden
}
.list view text {
    display: inline - block;
    line - height: 92 rpx
}
.list view button {
    width: 200 rpx;
    display: inline - block;
    float: right
}

index.js

//index.js
Page({
  data: {
    list:[],
    complete:0
  },
  bindKeyInput:function(e){
    this.setData({
      inputValue:e.detail.value
    })
  },
  add:function(){
    var list = this.data.list;
    list.push({checked:false,value:this.data.inputValue});
    this.setData({
      list:list,
      inputValue:''
    })
  },
  delete:function(e){
    var list = this.data.list;
    list.splice(e.target.dataset.index,1)
    this.setData({
      list:list
    })
    this.com_task()
  },
  change:function(e){
    console.log(e.detail.value[0])
    var list = this.data.list;
    list[e.target.dataset.index].checked = !!e.detail.value[0]
    this.setData({
      list:list
    })
    this.com_task()
  },
  com_task:function(){
    var complete = 0,list = this.data.list;
    for(var i=0,len=list.length;i<len;i++){
      console.log(list[i].checked)
      if(list[i].checked!=false){
        complete++
      }
    }
    this.setData({
      complete:complete
    })
  }
})

list 为任务列表， complete 为已完成的任务数量 页面展示效果如下

源码 https://github.com/mistory/todolist 点击阅读原文获取