WeChat小程序开发-初学者笔记（一）

WeChat小程序开发学习第一天：

完成学习目标：

1.安装并了解Wechat小程序的基本环境，

2.可以利用已学知识的结合简单实现helloWorld界面。

学习过程：

1.首先在微信平台上进行相关注册和下载小程序开发工具（此处不累述，具体教程可看mooc上教程资料：https://www.icourse163.org/course/HZIC-1205901813（浙江工商大学的“微信小程序开发从入门到实践“）

2.下载好开发工具后，进入添加项目界面，其中APPID是在网页登陆微信小程序时会提供给你的APPID，开发学习时也可以使用测试号，选择不适用云服务：

WeChat小程序开发-初学者笔记（一）-LMLPHP

然后点击新建，进入开发界面

WeChat小程序开发-初学者笔记（一）-LMLPHP

可以把开发界面分为四个区域，分别是文档目录，编译代码区，预览效果图，上面的工具选项栏。

看第一个区域

WeChat小程序开发-初学者笔记（一）-LMLPHP 其中pages文件是存放页面，这里就有index和logs两个默认页面，index是默认首页，logs是日志文件。与index并存的还有utils和app.js等文档和文件夹。

这里需要有web前端开发的学习基础，整个app的控制文件有app.js,app.json,app.wxss，其中app.js和app.wxss对应于web前端开发中的js文件和css(样式管理）文件，json是控件管理文件，具体运用的情况再加以介绍。

对应的每个页面，除了以上三个后缀文件还有.wxml文件，相当于网页中的html文件。

进入index.wxml文件：

<!--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}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

这里把首页分为两大块，userinfo这块有一个按钮和一个判断语句，在wxml文档中，用{{ }}两个大括号包围的是保存在js文档里的变量，这里实现了如果hasUserInfo变量是假并且canIUse变量是真则显示”获得头像昵称“的按钮界面，不然则实现block的内容

以下是index.js文件内容。

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')//判断组件button...getUserInfo是否可用，返回boolean类型
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

这里提供了许多API，实现了当点击按钮获取用户信息时，则调用js脚本文件中的getUserInfo函数，并且把获取的信息赋值给变量userInfo，将hasUserInofo的值设为true，这样判断语句就会转向执行else的内容，else的block中有两个组件分别是image（图片）和text（文字），调用对应变量值呈现相应信息并且用mode="cover" 来覆盖原来的按钮。

成功授权界面图：

WeChat小程序开发-初学者笔记（一）-LMLPHP

下面的view视图组件中显示的是motto变量内容，将js文件内motto变量赋值为“helloWorld”即可以实现。

下面来了解json文件和tabBar的使用。

打开app.json 在"windows"块的后面输入如下代码：

"tabBar": {
   "list": [{
     "pagePath": "pages/index/index",
     "text": "首页",
     "iconPath": "images/index1.png",
     "selectedIconPath": "images/index.png"
   },
   {
     "pagePath":"pages/logs/logs",
     "text":"日志",
     "iconPath":"images/logs1.png",
     "selectedIconPath":"images/logs.png"
   }
  ]
 },

tabBar类似导航栏的功能，使用list数组来实现导航条目，规定list里的项数在2到5个之间，pagePath为具体的地址路径，必须是在app.json文件的"pages"中定义过的路径，test为文本内容，iconPath为未点击时的图片地址，其中images文件夹是我们自己在相应目录上创建的，图片建议在阿里巴巴图标网站中获取（https://www.iconfont.cn ），selectedIconPath是选中图标时显示的图片。

运行效果如下：

WeChat小程序开发-初学者笔记（一）-LMLPHP 当然还有其他样式效果的设置，具体都可参考微信小程序的官方文档。

总结：

以上是我学习微信小程序开发的第一天笔记，希望我的笔记能够在记录我学习效果的过程中也能够帮助大家，今天的内容比较简单和基础，不过还是建议开发者有一定的html，css，和javascript的基础，因为我是近一年前学习的web前端相关知识，对相关专业知识的了解也有点模糊了，所以也是在学习的过程中重拾记忆和技术，当然希望更多朋友能够指出我的问题，希望共同进步。

疑惑点和难点：

1.不知道目录中的最后两个json文件的用处

2.utils是用来存放images等文档的吗？

3.对javascript的掌握明显不足

4.对博客园的使用也不太行啊

SixteenTime

WeChat小程序开发-初学者笔记（一）