微信小程序第一次亲密接触

微信小程序源码:http://www.getweapp.com/
首先
先申请一个appid，要用一个没有绑定过微信或者公众号的一个邮箱来注册微信小程序，这些可以跟着微信小程序注册的步骤来。
注意事项：
1. 绑定的身份证，一个身份证只能最多申请5个小程序
2. 填写服务类目，里面有应用一类的选择，和小游戏选择，如果两者只能选择一种，小游戏或者应用类目，不能一起选，如果你选择小游戏，那么这个appid只能开发小游戏，
下载开发工具
接下来下载微信开发工具，地址为微信应用开发工具下载地址 。这个工具可以开发小游戏，小程序和公众号网页，不过这个工具会根据你的appid来决定你可以开发什么项目，如果你的appid选的是小游戏，那么只能用这个工具默认创建的就是游戏类的项目。

工具的使用：
微信小程序新建一个快速启动模板

目录介绍：
app.json :配置页面，任何一个新添加的页面都要在里面配置添加
界面布局和html布局差不多，但是需要用到小程序提供的组件
html

底部导航：tabBar，在app.json里面配置，可以要官方文档查看用法小程序官方文档 说明在框架–>配置–>tabBar
注：json里面不能添加注释

{
  "pages": [                //项目里面有几个界面，就在page里面配置几个页面路径
    "pages/index/index",
    "pages/join/join",
    "pages/logs/logs"
  ],
  "window": {                                             
    "backgroundTextStyle": "light",                       
    "navigationBarBackgroundColor": "#f00",               //顶部导航的背景色
    "navigationBarTitleText": "我的第一个小程序",           //顶部导航的标题
    "navigationBarTextStyle": "#fff"                       //顶部导航字体的颜色
  },
  "tabBar": {
    "selectedColor": "#f00",        //字体被选中选中指定的颜色
    "list": [{                                    //list集合的长度为底部导航模块的数量，最少1个，最多5个
      "pagePath": "pages/index/index",            //指定要跳转的页面路径
      "text": "首页",                             //底部导航的标题内容
      "iconPath": "images/home_defult.png",       //导航的图标路径
      "selectedIconPath": "images/home_press.png" //被选中的导航图标路径
    },
    {"pagePath": "pages/join/join",
      "text": "加入",
      "iconPath": "images/join_default.png",
      "selectedIconPath": "images/join_press.png"
    }
    ]
  }
}

组件:
view：官方文档说是师徒容器, 就相当于html的div可以模块化
text:可以支持\n 等换行

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <!-- <swiper>轮播图 -->
  <block wx:for="{{imgUrls}}" wx:key="imgUrls">
    <swiper-item>
      <image src="{{item}}" class="slide-image" />
    </swiper-item>
  </block>
</swiper>


<!--列表-->
<view class='view_list'>
   <view class="view_item" wx:for="{{listDatas}}" wx:key="listDatas" bindtap='toDetail' data-index='{{index}}'>  
   <!-- bindtap绑定的事件    data-index常常伴随list绑定的点击事件，为绑定的事件提供下标值 -->
    <view class='view_img'>
      <image class='img_a' src="{{item.img}}" />    <!--item是集合里面某一条目，img我们自己定义的，和js里面给定的值搭配-->
    </view>
    <view class='view_msg'>
      <view class='view_title'>{{item.title}}</view>  <!--item.title是listDatas指定的某一条目的title-->
      <text class='text_des'>{{item.des}}</text>
    </view>
    <view class='view_btn'>
      <image class='btn_detail' src='/images/btn_look.png'></image>
      <image class='btn_again' src='/images/btn_money.png'></image>
    </view>
  </view>
</view>

js
由于小程序不是dom解析，不能通过像html的document.getElementById() 等来获取组件 ,用法和vue.js差不多。

绑定点击事件：bindtap ：里面指定一个方法，获取参数e可以获取一些相关值，如下标

Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true,
    autoplay: false,
    interval: 5000,
    duration: 1000,
    listDatas:[
      {
        img:'/images/sug_a.png',
        title:"标题",
        des:"描述"
      },
      {
        img:'/images/sug_b.png',
        title: "标题",
        des: "描述"
      },
      {
        img: '/images/sug_c.png',
        title: "标题",
        des: "描述"
      },
      {
        img: '/images/sug_d.png',
        title: "标题",
        des: "描述"
      }
    ]
  },
  // onload：页面刚进入的时加载的方法，setData也可以为页面设定相关的值
  onLoad: function(){ 
    this.setData({
      test:'01',
    })
  },
  // toDetail:在wxml页面指定绑定的方法
  toDetail: function(e){
    //e.currentTarget.dataset.index;获取点击条目的下标值
    var index = e.currentTarget.dataset.index;
    console.log(index);
  }
})

e打印的值

{type: "tap", timeStamp: 1811, target: {…}, currentTarget: {…}, detail: {…}, …}changedTouches: Array(1)0: clientX: 112clientY: 209force: 1identifier: 0pageX: 112pageY: 209__proto__: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()length: 1__proto__: Array(0)concat: ƒ concat()constructor: ƒ Array()copyWithin: ƒ copyWithin()entries: ƒ entries()every: ƒ every()fill: ƒ fill()filter: ƒ filter()find: ƒ find()findIndex: ƒ findIndex()forEach: ƒ forEach()includes: ƒ includes()indexOf: ƒ indexOf()join: ƒ join()keys: ƒ keys()lastIndexOf: ƒ lastIndexOf()length: 0map: ƒ map()pop: ƒ pop()push: ƒ push()reduce: ƒ reduce()reduceRight: ƒ reduceRight()reverse: ƒ reverse()shift: ƒ shift()slice: ƒ slice()some: ƒ some()sort: ƒ sort()splice: ƒ splice()toLocaleString: ƒ toLocaleString()toString: ƒ toString()unshift: ƒ unshift()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}__proto__: ObjectcurrentTarget: dataset: {index: 0}id: ""offsetLeft: 0offsetTop: 150__proto__: Objectdetail: {x: 112, y: 209}target: {id: "", offsetLeft: 93, offsetTop: 206, dataset: {…}}timeStamp: 1811touches: [{…}]type: "tap"_requireActive: true__proto__: Object

API的调用：点击跳转小程序的API链接，拨打电话–>wx.makePhoneCall
如拨打电话，先布局界面

  <!-- tell：绑定的点击事件 -->
  <button bindtap='tell'>拨打电话</button>

然后在js里面调用api,然后点击按钮就拨打该电话

  tell:function(){
    wx.makePhoneCall({
      phoneNumber: '1393566****' //仅为示例，并非真实的电话号码
    })
  },