从零开始学微信小程序开发者工具。

开发前的准备：

  先把 微信开发者工具 下载了，具体百度全都有。

 （1）有人说，会Vue小程序根本不用学：微信小程序虽然是腾讯自己搞的，但是核心的西乡跟Vue等框架是一样的。

（2）善于搜集精美的小组件，：“我们不生产代码，我们只是代码的搬运工，”善于找到自己想要的然后学习组装成自己一个大项目，可以学到很多只是。具体上Github搜索，全都有。

（一）生成结构

首先是代码的构成，分为四个模板。1.Json配置 2.WXML模板（相当于Html）3.WXSS样式（相当于Css）3.JS逻辑交互。

 看看他们分别的作用。

（1）Json配置

根目录有一个app.json和project.config.json，此外在 page/logs目录下还有一个logs.json。

 app.json是对小程序的全局配置，包括小程序的所有页面的路径，界面的表现，网络超时的时间，底部的Tab。

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

 pages是小程序所有页面的路径。

window是定义小程序顶部和底部等其他样式。

文件名不需要写文件后缀，因为框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件进行整合。

具体window属性请参考:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html点击打开链接

project.config.json 

是一个自定义配置，所有样式和配置都在这里面，当你换电脑的时候可以载入这个配置代码包。

（2）WXML模板

跟html一样，也是采用html+css+js实现。

当你打开page/index/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}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

只是标签名和属性变换了而已，多了一些类似Vue里面一些判断属性的表达式，简单来说这种MVVM的开发模式，就是把渲染和逻辑分离，不要让JS直接操作DOM，JS只要管理就好，然后再通过一种模板语法来描述状态和界面结构的关系。

举个例子：

wxml直接这样写  

<text>{{msg}}</text>

JS通过管理状态这样写：

Page({
  data: {
    msg: 'Hello !'
  }
})

通过{{}}语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不能完整的描述状态和界面的关系，加上一些if/else，for等控制力。

具体请查看 点击打开链接

（3）WXSS样式

 跟css之类的类似，新增了尺寸单位，因为是移动端开发，会有不同宽度和设备像素比，wxss加了rpx为新单位，免去了换算的烦恼，由于采用了浮点数运算，还有有一点的偏差。提供了全局样式和局部样式。此外仅支持部分css选择器。

   

（4）JS的交互逻辑

仅仅一个界面是不够的，还要响应用户，做下交互，获取当前位置等等。

举个例子：

在wxml这样写：

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

在js中这样写：

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

此外，小程序中还提供了丰富的API，在默认程序中，就举了一个例子：

通过pages/index/index.js 调用了 wx.getUserInfo 获取微信用户的头像和昵称，最后 setData 把获取到的信息显示到界面上。

wxml：

<!--wxml-->
<!-- 如果只是展示用户头像昵称，可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<!-- 需要使用 button 来授权登录 -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
<view wx:else>请升级微信版本</view>

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function() {
    // 查看是否授权
    wx.getSetting({
      success: function(res){
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function(res) {
              console(res.userInfo)
            }
          })
        }
      }
    })
  },
  bindGetUserInfo: function(e) {
    console.log(e.detail.userInfo)
  }
})

详情请查看 点击打开链接

       结束：2018.6.29 2:16