二、第一个微信小程序

使用微信开发者工具创建一个新的空项目，即是一个显示自己账号的小程序。

 

也可以删除自动生成的冗余代码，手动写一个显示自己账号的简单小程序。

下面即是基于JavaScript模板的手工写的一个简单小程序。

界面：

主要代码：

<!--pages/index/index.wxml-->

<view class='container'>

  <image src='{{src}}' mode='widthFix'></image>

  <text>{{name}}</text>

  <button open-type='getUserInfo' bindgetuserinfo='getMyInfo'>点击获取头像和昵称</button>

</view>      //上面的open-type='getUserInfo'表示激活获取微信用户信息功能，然后使用bindgetuserinfo属性表示获得的数据将传递给自定义函数getMyInfo，是一个对象，里面是各种键值对。

// pages/index/index.js
Page({

  /**

   * 页面的初始数据

   */

  data: {

    src: '/images/logo.png',

    name: 'Hello World'

  },

  /**

   * 自定义函数--获取微信用户信息

   */

  getMyInfo: function (e) {

    let info = e.detail.userInfo;

    this.setData({        //setData()用来写data数据，暂无getData()方法，直接用this.data来读即可。

      src: info.avatarUrl, //更新图片来源

      name: info.nickName  //更新昵称

    })

  }

})

app.json和index.wxss的代码略。

总结：微信小程序，简单来说，就是一个wxml文件（用来做展示界面）配一个js文件（用来实现逻辑功能）。