意外接触小程序： 三个小程序的步骤

准备环境： ①注册好一个小程序的帐号
②开发者工具

了解：
一、页面创建
1.全局三个文件，分别是app.js app.json app.wxss(名称不可更改）
2.创建Pages目录文件（作用是用来放各个页面的）
3.创建页面{给页面起名字，并且创建4个文件}
（1）js：页面逻辑实现
（2）json: 负责标题栏和一些状态栏
（3）wxml: 管理页面有什么
（4）wxss: 页面排布
4.把内容单元封装在view内部，写法："内容”
用class的方法对view内容样式进行排布
……class可以对其他组件样式布局也有效，class规定的样式前需要加上’.’，如果像image/text这样的组件的话，不需要加’.’(全局有效）
5.这节课需要用到三个组件：图片、文字、按钮

（1）图片 <image src='图片路径'></image>

  (2)  文字 <text>"内容"</text>

  (3)  按钮  <button >"按钮上的字"</button>

看下源代码：
index.wxxml

<view class="container">
<image  src='{{src}}' class="abc"></image>
<text>{{name}}</text>
<button open-type="getUserInfo" bindgetuserinfo="getMyInfo">点击获取头像和昵称</button>
<!-- open-type="getUserInfo"   指的是激活获取微信用户信息
bindgetuserinfo="getMyInfo" 表示把获得的数据传递给自定义的函数  getUserInfo是自定义的 -->
</view>

index.js文件

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

  /**
   * 页面的初始数据
   */
  data: {
  name:'Hello World',
  src:'/images/user.png'
  },

  getMyInfo:function(e){
    console.log(e.detail.userInfo)
    let info =e.detail.userInfo;
    this.setData({
      name:info.nickName,//更新名字
      src:info.avatarUrl//更新图片来源
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

效果：


使用小程序做两三个小案例： 引用哔哩哔哩的视频
https://www.bilibili.com/video/av58012612/?spm_id_from=333.788.videocard.5

有视频介绍，建议保存下视频