微信小程序 - 从入门到入土

violet~evergarden

已于 2023-03-23 19:18:03 修改

阅读量814

点赞数 2

分类专栏：开发文章标签：微信小程序小程序微信

于 2022-07-23 21:25:12 首次发布

本文链接：https://blog.csdn.net/m0_58466526/article/details/125938719

版权

开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

💬前言

🎯本文主要针对微信小程序的入门阶段学习
💡内容：黑马程序员视频为基础结合自身练习和实际操作的区别，以及时间带来的版本迭代出现的不兼容问题
🌹学习感悟：最好先具备一些前端知识(三件套-HTML,CSS,JS)上手更快，学习起来更轻松
如果对您有帮助的话还请动动小手点赞👍，收藏⭐️，关注❤️

🚩第一部分

🔸学习目标

能够使用 WXML 模板语法渲染页面结构
能够使用 WXSS 样式美化页面结构
能够使用 app.json 对小程序进行全局性配置
能够使用 page.json 对小程序页面进行个性化配置
能够知道如何发起网络数据请求

代码

app.json配置：


"pages":[
    "pages/list2/list2",
    "pages/list/list",
    "pages/index/index",
    "pages/logs/logs"
  ],

list1.wxml

<!--pages/list/list.wxml-->
<!-- 第一个样例 -->

<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>

第三个样例截图是在第三个样例修改样式后的结果【原来应该是横向分散】
在这里插入图片描述

<!-- 第二个样例 -->
<!-- 设置纵向滚动：设置强制性的高度height -->
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>

在这里插入图片描述


<!-- 第三个样例 -->
<swiper class="swipe-container" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay interval="3000"> 
<!-- 点背景白色，当前页点灰色三秒自动切换 -->

<!-- 第一个轮播图 -->
<swiper-item>
  <view class="item">A</view>
</swiper-item>
<!-- 第二个轮播图 -->
<swiper-item>
  <view class="item">B</view>
</swiper-item>
<!-- 第三个轮播图 -->
<swiper-item>
  <view class="item">C</view>
</swiper-item>
</swiper>

在这里插入图片描述

list1.wxss

/* pages/list/list.wxss */
.container1 view{ 
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightblue;
}
.container1 view:nth-child(3){
  background-color: lightpink;
}
/* 横向布局 */
.container1 {
  border: 1px solid red;
  /* 给scroll-view 固定高度 */
  height: 120px;
  width: 100px;
}


/* 轮播图 */

.swipe-container {
  height: 150px;
}

.item {
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item{
  background-color: lightgreen;
} 
swiper-item:nth-child(2) .item{
  background-color: lightblue;
} 
swiper-item:nth-child(3) .item{
  background-color: lightpink;
}

list2.wxml

<!--pages/list2/list2.wxml-->
<!-- 第一个样例 -->
<view>
  手机号支持长按选中效果需加selectable 
  <text selectable>13813813813</text>
</view>
rich-text渲染为UI结构：设置样式
<rich-text nodes="<h1 style='color: red;'>标题</h1>"></rich-text>

在这里插入图片描述

<!-- 第二个样例 -->
通过type属性指定按钮颜色\n
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<text>size-min小尺寸按钮\n</text> 
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮\n</button>
<text>plain镂空按钮\n</text>
<button size="mini" plain>普通按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

在这里插入图片描述

<!-- 第三个样例 -->
```<image></image>
<image src="/images/吉良吉影.png" mode="heightFix"></image>

在这里插入图片描述

list2.wxss

/* pages/list2/list2.wxss */
image {
  border: 1px solid red;  
}

image标签使用图片
在这里插入图片描述

教程图片

在这里插入图片描述

🚩第二部分

🔸学习目标

能够知道如何实现页面之间的导航跳转
能够知道如何实现下拉刷新效果
能够知道如何实现上拉加载更多效果
能够知道小程序中常用的生命周期函数

Mathache
理解：{{插入表达式}}
{{ }}：可以调用变量、变量类型进行运算

list3.wxml

变量赋值与使用&条件语句

<button type="primary" bindtap="bthTapHandle">按钮</button>
<button type="primary" bindtap="CountChange">+1</button>
<button type="primary" bindtap="bthTap2" data-info="{{2}}">+2</button>  
 <input type=""/> <!-- data-*{{参数值}} 形式传参-->



<!-- {{插入表达式}} 使用声明变量 -->
<view>{{info}}</view>   
<image src="{{dancing}}" mode="widthFix"></image>   
<view>{{randomNum1 >= 5 ? '数字大等于5' : '数字小于5'}}</view> 

<!-- 通过block选择性显示页面标签 --> <!--改为true显示 -->
 <block wx:if="{{false}}"> 
<view>可隐藏</view>
<view>可隐藏</view>
</block>



<view hidden="{{flag}}">hidden样式的条件为(变量flag)true时隐藏元素，否则显示</view>
<view wx:if="{{!flag}}">wx:if条件隐藏,条件语句true时显示</view>
<!-- 使用建议：控制条件多(如男,女,未知或更多分支)用wx:if, elif, 频繁切换建议用hidden，防止wx:if切换时的创建耗时 -->



<!-- for循环访问数组index与item项 -->
<view wx:for="{{arr1}}">    
  索引是：{{index}}, item 项是： {{item}}
</view>


<!-- 可自定义修改默认的数组访问index与item名称 --> 
<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">
  索引是： {{idx}}, item 项是 {{itemName}}
</view>

在这里插入图片描述

list3.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
      count: 0,
      type: 1,
      flag: false,
      arr1: ['苹果','小米','华为'],
      userlist: [ //数组的嵌套-二维数组
        {id: 1, name: '小红'},
        {id: 2, name: '小黄'},
        {id: 3, name: '小绿'}, 
      ],
  },

//定义按钮的事件处理函数
bthTapHandler(e) {  //event简写成e
  console.log(e) //打印
},
// + 1 按钮的点击事件处理函数
CountChange() {
  console.log('ok')
  this.setData({ //理解为java设置函数
    count:this.data.count + 1 //调用旧数据成员 + 1
  })
},
bthTap2(e) {
  this.setData({
    count: this.data.count + e.target.dataset.info
  })
},

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

list3.wxss

@import "/common/common.wxss";   导入其他文件的样式且使用

list4.wxml

wxss是小程序的样式语言，相比css进行了扩充和修改

rpx尺寸单位，微信小程序独有的用来解决屏幕适配，等分为750份，即屏幕总宽为750rpx

 @import样式导入, 在样式文件中其他目录下的样式@import + 相对路径

全局配置样式与局部配置样式

windows全局配置 导航栏区域配置
常用配置项  Bar开头导航栏， app.json ->window ->navigationBarTitleText 
 navigationBarTitleText默认Weixin

修改导航栏背景色  app.json ->window -> navigationBarBackgroundColor 默认#fff  且只支持16进制形式如：#2b4b6b， 不能想red

导航栏背景标题颜色只有黑与白，默认黑 app.json ->window ->navigationBarTextStyle

下拉刷新是移动Duang的专有名词，指的是通过手指在屏幕上的下拉滑动操作，，从而重新加载页面数据的行为  设置：app.json ->windows-> 没有就添加"enablePullDownRefresh": true

模拟器只能用来辅助开发，模拟器的效果可能不同于真机效果，真实手机上下拉刷新不会自动合上，需要再设置

设置下拉刷新背景色 app.json ->windows->添加"backgroundColor": "#efefef"设为灰色 

设置下拉刷星是loading 下拉刷新时的三个小圆点 app.json ->windows->"backgroundTextStyle":"light",  只有dark或light

上拉触底是移动Duang的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为 app.json ->windows-> "onReachBottomDistance": 50  默认50px，一般不改

tabBar是移动段常见的页面效果，用于实现多页面的快速切换 ：6种常见设置
app.json ->添加"tabBar"-> list数组 至少包含两个对象,页面和对应文本名称,   2-5个

<!-- app.json中的tabBar -->

"tabBar": {
      "list": [
        {
          "pagePath": "pages/list3/list3",
          "text": "list3"
        },
        {
          "pagePath": "pages/list4/list4",
          "text": "list4"
        }
        
      ]
  },

<!-- 配置完整的tabBar效果 --> 
1.导入6张图片配置图标两两一组：带有-active的是选中后的图标 
2.建立三个页面
3.配置tabBar选项 

在实际开发中不是所有的页面需要下拉刷新"enablePullDownRefresh": true, 一般放在局部配置中，不要写到全局，比如写在消息页面

发起网络数据请求 ， 只能请求HTTPS类型的接口，必须将接口的域名添加到信任列表 如https://www.escook.cn/ 真实域名

app.wxml

/* 写法app.wxss为全局样式， 页面样式会优先影响页面，就近原则【或者说精准匹配】 */
/* 局部样式>=全局样式权重，局部样式会覆盖全局样式 */
/* view {
  padding: 10rpx;
  margin: 10rpx;
  background-color: lightblue;
} */

app.js

// app.js
App({   
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

home.html

<!--pages/home/home.wxml-->
<!-- 在js文件中创建getInfo与postInfo函数 -->
<button bindtap="getInfo">发起GET请求</button>
<button bindtap="postInfo">发起POST请求</button>

<!-- 小程序为发起网络数据请求，小程序基于微信，而不是浏览器，没有跨域和Ajax请求 -->



<!-- day3 声明式导航， 编程式导航 【页面的跳转】-->
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
<!-- 不加open-type或者路径没有从'/'开始都无法跳转！！！ -->
<!-- 导航跳转到非TabBar页面  open-type="navigate" -->
<navigator url="/pages/list4/list4" open-type="navigate">导航到list4页面</navigator>

在这里插入图片描述

app.json

{
  "pages":[
    
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact",
    "pages/list4/list4",
    "pages/list3/list3",
    "pages/list2/list2",
    "pages/list/list",
    "pages/index/index",
    "pages/js1/js1",
    "pages/logs/logs"
  ],

  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText":"wx",  
    "navigationBarTextStyle":"black",
    
    "backgroundColor": "#efefef",
    "onReachBottomDistance": 50
  },
 
  "tabBar": {
    "list": [
      {
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/tabs/home.png",
      "selectedIconPath": "/images/tabs/home-active.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/tabs/message.png",
      "selectedIconPath": "/images/tabs/message-active.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/tabs/contact.png",
      "selectedIconPath": "/images/tabs/contact-active.png"
    }
  ]
  },

  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

home.wxml

<!--pages/home/home.wxml-->
<!-- 在js文件中创建getInfo与postInfo函数 -->
<button bindtap="getInfo">发起GET请求</button>
<button bindtap="postInfo">发起POST请求</button>

<!-- 小程序为发起网络数据请求，小程序基于微信，而不是浏览器，没有跨域和Ajax请求 -->

message.json

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#0000ff",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "消息页面",
  "backgroundColor": "#ffffff",
  "enablePullDownRefresh": true
}

🚩第三部分

🔸学习目标

能够知道如何实现页面之间的导航跳转
能够知道如何实现下拉刷新效果
能够知道如何实现上拉加载更多效果
能够知道小程序中常用的生命周期函数

contact.js

// pages/contact/contact.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    count: 0,
    colorList: [],
    isloading: false
  },

  getColors() {
    //需要展示 loading 效果
    wx.showLoading({
      title: '数据加载中...'
    }),
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method: 'get',
      success: ({data:res}) => {
        this.setData({
          colorList: [...this.data.colorList, ...res.data]
        })
      },
      //需要隐藏 loading效果
      complete: () => { 
        wx.hideLoading()
        this.setData({
          isloading: false
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getColors()
  },

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

  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if(this.data.isloading) return  //true时正在加载return
    this.getColors()
  },

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

  }
})

contact.wxml

<!--pages/contact/contact.wxml-->
<text>pages/contact/contact.wxml</text>

<!-- wxml结构 -->
<view wx:for="{{colorList}}" wx:key="inidx" class="num-item" style="background-color: rgba({{item}});">{{item}}</view>

<!-- 扩展自定义编译条件【提高开发效率】：修改样式后每次需要重新编译后才能看到页面效果 ：小程序模式编译旁边的自定义编译，没有设定默认首页-->

<!-- 生命周期介绍： 是指一个对象从创建 -> 运行 -> 销毁的整个过程，强调的是一个时间段 -->
<!-- 生命周期分类： 应用生命周期、页面生命周期 -->
<!-- 生命周期函数：是有小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行， 同理分为两类应用和页面 -->

<!-- app.js中的app没有用，可删除自己再调用app，给出默认4个生命周期函数 -->

contact.wxss

/* pages/contact/contact.wxss */
.num-item {
  border: 1rpx solid #efefef;
  border-radius: 8rpx;
  line-height: 200rpx;
  margin: 15rpx;
  text-align: center;
  text-shadow: 0rpx 0 prx 5prx #fff;
  box-shadow: 1rpx 1rpx 6rpx #aaa;
}

在这里插入图片描述

message.js

// pages/message/message.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    count: 0,
    colorList: []
  },

  getColors() {
    //需要展示 loading 效果
    wx.showLoading({
      title: '数据加载中...'
    }),
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method: 'get',
      success: ({data:res}) => {
        this.setData({
          colorList: [...this.data.colorList, ...res.data]
        })
      },

      //需要隐藏 loading效果
      complete: () => { 
        wx.hideLoading()
      }
    })
  },

  //按钮选取函数 调用 count自增+1
  addCount() {
    this.setData({
      count: this.data.count + 1
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getColors()  
  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
      this.setData({
        count: 0 //下拉刷新后count值为零
      })
      wx.stopPullDownRefresh()  //关闭下拉刷新效果
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    console.log('触发了上拉触底的事件console控制台中显示')
  },

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

  }
})

message.wxml

<!--pages/message/message.wxml-->
<text>pages/message/message.wxml</text>

<!-- 声明count参数，配置count自增按钮 -->
<view>count值是：{{count}}</view>
<button bindtap="addCount">+1</button>

<!-- 下拉刷新后会一直显示，需要调用函数停止当前页面的下拉刷新，在message.js的onPullDownRefresh下拉事件监听函数调用中wx.stopPullDownRefresh()  //关闭下拉刷新效果 -->

<!-- 上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为 -->

<!-- 监听上拉触底事件js中onReachBottom处理函数 -->
<view class="box"></view>

<!-- 可以在json中配置"onReachBottomDistance": 150设置触发上拉触底事件的距离 -->

<!-- 上拉触底案例实现：六个步骤 【可以在contact做一遍】
①定义获取随机颜色的方法  js中data定义数组 colorList: []
②在页面加载是获取初始数据  js中生命周期中调用this.getColors()函数
③渲染UI结果并美化页面效果  自定义类标签样式num-item
④在上拉触底是调用获取随机颜色的方法   在js的上拉触底事件onReachBottom调用getColors获取颜色函数 
⑤添加loading提示效果  getColors()中添加调用函数
⑥对上拉触底进行节流处理 分三步 
 data中定义 isloading: false
 getColors()函数中setData中设置isloading: false
 最后在上拉触底事件函数中加上控制 if(this.data.isloading) return  //true时正在加载return
 -->

message.wxss

/* pages/message/message.wxss */

.box{  /*类名选择器*/
  height: 2000rpx;
  background-color: lightblue;
}

info.wxml

<!--pages/info/info.wxml-->
<text>pages/info/info.wxml</text>
<navigator open-type="navigateBack" >后退</navigator>
<!-- 若只是回到上一个页面，delta也可以不写，默认值为1，省略delta="1" -->

<!-- 编程式导航实现后退效果，按钮绑定函数，调用函数navigateBack返回 -->
<button bindtap="goBack">后退</button>

shoplist.wxml

<!--pages/shoplist/shoplist.wxml-->
<text>pages/shoplist/shoplist.wxml</text>

<!-- 改造home的九宫格标签navigator -->
<!-- js中的onReady设置标题 -->


<!-- 美食页面制作。。。。。。 -->

<view class="shop-item" wx:for="{{shopList}}" wx:key="id">
  <view class="thumb">
    <image src="{{item.images[0]}}"></image>
  </view>
  <view class="info">
    <text>{{item.name}}</text>
    <text>电话：{{item.phone}}</text>
    <text>地址：{{item.address}}</text>
    <text>营业时间：{{item.businessHours}}</text>
  </view>
</view>

<!-- 2023图片无法显示 -->

shoplist.js

// pages/shoplist/shoplist.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    query: {},
    shoplist: [],
    page: 1,
    pageSize: 10,
    total: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      query: options  //动态设置获取
    })
    this.getShopList()
  },

  getShopList() {
    wx.request({ //注意url是强调重点符号'`',而不是单引号
      url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,
      method: 'GET',
      data: {
        _page: this.data.page,
        _limit: this.data.pageSize
      },
      success: (res) => {
        this.setData({
          shopList : [...this.data.shopList, ...res.data],
          total: res.header['X-Total-Count'] - 0
        })
      } 
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    wx.setNavigationBarTitle({
      title: this.data.query.tltle  //设置动态获取标题
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

shoplist.wxss

/* pages/shoplist/shoplist.wxss */
.shop-item {
  display: flex;
  padding: 15rpx;
  border: 1rpx solid #efefef;
  border-radius: 15rpx;
  margin: 15rpx;
  box-shadow: 1rpx 1rpx 15rpx #ddd;
}

.thumb image {
  width: 250rpx;
  height: 250rpx;
  display: block;
  margin-right: 15rpx;
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 24rpx;
}

.shop-title {
  font-weight: bold;
}
/* 跳过17案例和18 以分页形式获取商铺数据的方法【无法显示图片。。】 */
/* 页数*每页数据量 >= 总数据量   ：判断是否还有下一页数据 */

message.wxml [wxs]

<view>{{m1.toUpperCase(username)}}</view>

<!-- 定义wxs脚本 -->
<wxs module='m1'> 
  //将文本转为大写形式 zs -> ZS
  module.exports.toUpperCase = function(str) {
    return str.toUpperCase()
  }
</wxs>


<!-- 定义外联的wxs脚本，使用外联 -->
<!-- module指定模块名称 -->
<view>{{m2.toLower(country)}}</view>
<!-- src相对路径，  module给模块起名字 -->
<wxs src="../../utils/tools.wxs" module="m2"></wxs>

<!-- wxs中定义函数不能作为组件的事件回调 -->
<!-- wxs应用场景就是过滤器，经常配合Mustache语法使用 -->
<!-- 隔离性指的是wxs不能调用js中定义的函数，wxxs不能调用小程序提供的API -->
<!-- 在IOS设备上小程序内的WXS会比JavaScript快20倍左右，而安卓差不多 -->

tools.wxs

function toLower(str) {
  return str.toLowerCase()
}
// 新建/utils/tools.wxs定义外联wxs
module.exports = {
  toLower: toLower
}

第四部分

之前：推翻重建


#### 注册小程序开发账号
[https://mp.weixin.qq.com/](微信小程序注册网址)     

#### 查看小程序AppID
点击菜单开发选项
![在这里插入图片描述](https://img-blog.csdnimg.cn/8bce58aaa3cd426d97a2b231d5ef365b.png#pic_center)
#### 熟悉界面
一.
![在这里插入图片描述](https://img-blog.csdnimg.cn/a644479a0bb549eeb300c8a6dbf7c29a.png#pic_center)
绿色【可开关】 ，  帮助 【帮助文档】 ，预览【可微信扫码】

二.

![在这里插入图片描述](https://img-blog.csdnimg.cn/17324d019c1745598c11979beda96a92.png#pic_center)

选用iPhone6/7/8 效果图显示预览，可调节大小
![在这里插入图片描述](https://img-blog.csdnimg.cn/60b232a54b604451a27f6870ad87675b.png#pic_center)
常用调试

三.
![在这里插入图片描述](https://img-blog.csdnimg.cn/e4b86d04244b443db563897de82aae9c.png#pic_center)
可调整显示信息

#### wxml与wxss 【类比html和css】
js进入小程序的入口Page() 和各种功能函数
### 小知识
小程序宿主环境：手机微信
渲染层 ：wxml ， wxss    ；  逻辑层：JavaScript       这两层通过Native（微信客户端）转发通信
运行机制：
 	启动过程：代码包下载到本地...
	渲染过程：解析app.json全局配置文件，加载wxml模板，wxss样式，执行调用 Page（）创建页面实例，页面渲染完成 
#### 小程序组件
①view 
类似于HTML的div，是一个块级元素

②scroll-view
可滚动的视图区域，常用来实现滚动列表效果

③swiper和swiper-item
轮播图容器组件 和 轮播图item组件


#### 各种组件


<-text selectable> 【selectable】让手机中可长按选中复制 </text>
<rich-text nodes="<h1 style='color red;'>标题</h1>"></rich-text>


#### 其他常用组件
①button 按钮

②image 图片

mode属性 mode值默认横纵比（不保证原图片横纵比，会比例失调） 
用widthfix  自适应

③navigator 类似HTML中的a链接

### 小程序API
##### API三大分类
①事件监听API
特点：以on开头

②同步API
特点：以Sync结尾
通过函数返回值直接获取执行结果，执行出错会抛出异常

③异步API
特点：类似于jQuery中的$.ahax(options)函数,需要通过success、fail、complete接受调用的结果
举例：wx.request（）发起网络数据请求，通过success接收

#### 协同工作
权限划分   ， 组织结构  ， 开发流程  ...
https://mp.weixin.qq.com/ 中添加项目成员、体验成员【**多人协作开发**】

更新上传代码 版本号 ，提交后审核

#### 发布上线-->推广
小程序头像 
名称、描述可修改5次一年

#### 小程序管理
统计：查看访问量、运营数据
手机查看数据-->小程序设计助手


# 第二部分
WXML模板、WXSS样式、app.json全局性配置、page.json页面个性化配置、发起网络数据请求

### 数据绑定
####  在 data 中定义页面的数据
在页面对应的 .js 文件中，把数据定义到 data 对象中即可：
#### Mustache语法

<view>{{要绑定的数据名称}}<\view>

Mustache 语法的主要应用场景如下：
⚫ 绑定内容
⚫ 绑定属性      图片page 定义路径  ，在标签image中调用路径名称
⚫ 运算（三元运算、算术运算等）



### 事件绑定

1.事件定义：
事件是渲染层到逻辑层的通讯方式。
通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。
2. 小程序中常用的事件  ...
3. 事件对象的属性列表  ...  target ，detail
4. **target** 和 currentTarget 的区别
5. 5. bindtap 的语法格式
在小程序中，不存在 HTML 中的 onclick 鼠标点击事件，而是通过 tap 事件来响应用户的触摸行为。
① 通过 bindtap，可以为组件绑定 tap 触摸事件，语法如下：...
② 在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event（一般简写成 e） 来接收：
6. 在事件处理函数中为 data 中的数据赋值
通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值，示例如下：
7. 事件传参
小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。例如，下面的代码将不能正常工作： ...
因为小程序会把 bindtap 的属性值，统一当作事件名称来处理，相当于要调用一个名称为 btnHandler(123) 的事件处理函数
可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字，示例代码如下：
最终：
⚫ info 会被解析为参数的名字
⚫ 数值 2 会被解析为参数的值
在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值，示例代码如下：
8. bindinput 的语法格式
在小程序中，通过 input 事件来响应文本框的输入事件，语法格式如下：
① 通过 bindinput，可以为文本框绑定输入事件：
② 在页面的 .js 文件中定义事件处理函数
  9. 实现文本框和 data 之间的数据同步
实现步骤：
① 定义数据
② 渲染结构
③ 美化样式
④ 绑定 input 事件处理函数     
定义数据：
渲染结构：      
美化样式：
绑定 input 事件处理函数：
#### WXML 模板语法 - 条件渲染

1 .  wx:if
在小程序中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：    
2 . 结合 <block> 使用 wx:if
如果要一次性控制多个组件的展示与隐藏，可以使用一个 <block></block> 标签将多个组件包装起来，并在
<block> 标签上使用 wx:if 控制属性，示例如下：       
注意： <block> 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染
3. hidden
在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的显示与隐藏： 
4. wx:if 与 hidden 的对比
① 运行方式不同
⚫ wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
⚫ hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏
② 使用建议
⚫ 频繁切换时，建议使用 hidden
⚫ 控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换      

#### WXML 模板语法 - 列表渲染
1 . wx:for
通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：
默认情况下，当前循环项的索引用 index 表示；当前循环项用 item 表示。          
2. 手动指定索引和当前项的变量名* 
⚫ 使用 wx:for-index 可以指定当前循环项的索引的变量名
⚫ 使用 wx:for-item 可以指定当前项的变量名                                         
3. wx:key 的使用
类似于 Vue 列表渲染中的 :key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，
从而提高渲染的效率，示例代码如下：      
#####  WXSS
WXSS (WeiXin Style Sheets)是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的 CSS    
##### WXSS 和 CSS 的关系
WXSS 具有 CSS 大部分特性，同时，WXSS 还对 CSS 进行了扩充以及修改，以适应微信小程序的开发。
与 CSS 相比，WXSS 扩展的特性有：
⚫ rpx 尺寸单位
⚫ @import 样式导入
#####  rpx 尺寸单位
rpx（responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位
#####  rpx 的实现原理
rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕，
在宽度上等分为 750 份（即：当前屏幕的总宽度为 750rpx）。
⚫ 在较小的设备上，1rpx 所代表的宽度较小
⚫ 在较大的设备上，1rpx 所代表的宽度较大
小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配
##### rpx 与 px 之间的单位换算* 
 在 iPhone6 上，屏幕宽度为375px，共有 750 个物理像素，等分为 750rpx。则：
750rpx = 375px = 750 物理像素
1rpx = 0.5px = 1物理像素
官方建议：开发微信小程序时，设计师可以用 iPhone6 作为视觉稿的标准。
开发举例：在 iPhone6 上如果要绘制宽100px，高20px的盒子，换算成rpx单位，宽高分别为 200rpx 和 40rpx
#### WXSS 模板样式 - 样式导入
1.使用 WXSS 提供的 @import 语法，可以导入外联的样式表
2.@import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。示例如下
#### WXSS 模板样式 - 全局样式和局部样式
1 . 全局样式 ： 定义在 app.wxss 中的样式为全局样式，作用于每一个页面。
2. 局部样式： 在页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面。
注意：
① 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
② 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式
### 全局配置
1. 全局配置文件及常用的配置项
小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下：
① pages
⚫ 记录当前小程序所有页面的存放路径
② window
⚫ 全局设置小程序窗口的外观
③ tabBar
⚫ 设置小程序底部的 tabBar 效果
④ style
⚫ 是否启用新版的组件样式

##### 全局配置 - window
1. 小程序窗口的组成部分
2. 了解 window 节点常用的配置项
3.  设置导航栏的标题
设置步骤：app.json -> window -> navigationBarTitleText
需求：把导航栏上的标题，从默认的 “WeChat”修改为“程序员”，效果如图所示：
4. 设置导航栏的背景色
设置步骤：app.json -> window -> navigationBarBackgroundColor
需求：把导航栏标题的背景色，从默认的 #fff 修改为 #2b4b6b ，效果如图所示：
5. 设置导航栏的标题颜色
设置步骤：app.json -> window -> navigationBarTextStyle
需求：把导航栏上的标题颜色，从默认的 black 修改为 white ，效果如图所示：+
注意： navigationBarTextStyle 的可选值只有 black 和 white
6. 全局开启下拉刷新功能
概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。
设置步骤：app.json -> window -> 把 enablePullDownRefresh 的值设置为 true
注意：在 app.json 中启用下拉刷新功能，会作用于每个小程序页面！
7. 设置下拉刷新时窗口的背景色
当全局开启下拉刷新功能之后，默认的窗口背景为白色。如果自定义下拉刷新窗口背景色，设置步骤为: 
app.json -> window -> 为 backgroundColor 指定16进制的颜色值 #efefef。效果如下：
8. 设置下拉刷新时 loading 的样式
当全局开启下拉刷新功能之后，默认窗口的 loading 样式为白色，如果要更改 loading 样式的效果，设置步
骤为 app.json -> window -> 为 backgroundTextStyle 指定 dark 值。效果如下：
注意： backgroundTextStyle 的可选值只有 light 和 dark
9. 设置上拉触底的距离
概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
设置步骤： app.json -> window -> 为 onReachBottomDistance 设置新的数值
注意：默认距离为50px，如果没有特殊需求，建议使用默认值即可
#### 全局配置 - tabBar
1. 什么是 tabBar
tabBar 是移动端应用常见的页面效果，用于实现多页面
的快速切换。小程序中通常将其分为：
⚫ 底部 tabBar
⚫ 顶部 tabBar
注意：
⚫ tabBar中只能配置最少 2 个、最多 5 个 tab 页签
⚫ 当渲染顶部 tabBar 时，不显示 icon，只显示文本
2. tabBar 的 6 个组成部分
① backgroundColor：tabBar 的背景色
② selectedIconPath：选中时的图片路径
③ borderStyle：tabBar 上边框的颜色
④ iconPath：未选中时的图片路径
⑤ selectedColor：tab 上的文字选中时的颜色
⑥ color：tab 上文字的默认（未选中）颜色
3. tabBar 节点的配置项
属性 类型 必填 默认值 
4. 每个 tab 项的配置选项
#### 全局配置 - 案例：配置 tabBar
1. 需求描述
2. 实现步骤
① 拷贝图标资源
② 新建 3 个对应的 tab 页面
③ 配置 tabBar 选项
3. 步骤1 - 拷贝图标资源
① 把资料目录中的 images 文件夹，拷贝到小程序项目根目录中
② 将需要用到的小图标分为 3 组，每组两个，其中：
⚫ 图片名称中包含 -active 的是选中之后的图标
⚫ 图片名称中不包含 -active 的是默认图标
截图如下：
4. 步骤2 - 新建 3 个对应的 tab 页面
通过 app.json 文件的 pages 节点，快速新建 3 个对应的 tab 页面，示例代码如下：
其中，home 是首页，message 是消息页面，contact 是联系我们页面。
5. 步骤3 - 配置 tabBar 选项
① 打开 app.json 配置文件，和 pages、window 平级，新增 tabBar 节点
② tabBar 节点中，新增 list 数组，这个数组中存放的，是每个 tab 项的配置对象
③ 在 list 数组中，新增每一个 tab 项的配置对象。对象中包含的属性如下：
⚫ pagePath 指定当前 tab 对应的页面路径【必填】 ⚫ text 指定当前 tab 上按钮的文字【必填】 ⚫ iconPath 指定当前 tab 未选中时候的图片路径【可选】 ⚫ selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】
6. 完整的配置代码

### 页面配置
1. 页面配置文件的作用
小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置
2. 页面配置和全局配置的关系
小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件”就可以实现这种需求。
注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准
3. 页面配置中常用的配置项
 ### 网络数据请求
1. 小程序中网络数据请求的限制
出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下
两个限制：
① 只能请求 HTTPS 类型的接口
② 必须将接口的域名添加到信任列表中
2. 配置 request 合法域名
需求描述：假设在自己的微信小程序中，希望请求 https://www.escook.cn/ 域名下的接口
配置步骤：登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名
注意事项：
① 域名只支持 https 协议
② 域名不能使用 IP 地址或 localhost
③ 域名必须经过 ICP 备案
④ 服务器域名一个月内最多可申请 5 次修改
3. 发起 GET 请求
调用微信小程序提供的 wx.request() 方法，可以发起 GET 数据请求，示例代码如下
4. 发起 POST 请求
调用微信小程序提供的 wx.request() 方法，可以发起 POST 数据请求，示例代码如下：
5. 在页面刚加载时请求数据在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的 onLoad 事件中调用获取数据的函数
5. 跳过 request 合法域名校验如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 
协议的接口。此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项，跳过 request 合法域名的校验。
注意：
跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用！
6. 关于跨域和 Ajax 的说明
跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小
程序中不存在跨域的问题。
Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象，由于小程序的宿主环境是微信客户端，所
以小程序中不能叫做“发起 Ajax 请求”，而是叫做“发起网络数据请求”。
### 案例
1. 首页效果以及实现步骤
① 新建项目并梳理项目结构
② 配置导航栏效果
③ 配置 tabBar 效果
④ 实现轮播图效果
⑤ 实现九宫格效果
⑥ 实现图片布局
2. 接口地址
① 获取轮播图数据列表的接口
⚫ 【GET】https://www.escook.cn/slides
② 获取九宫格数据列表的接口
⚫ 【GET】https://www.escook.cn/categories
总结
① 能够使用 WXML 模板语法渲染页面结构
⚫ wx:if、wx:elif、wx:else、hidden、wx:for、wx:key
② 能够使用 WXSS 样式美化页面结构
⚫ rpx 尺寸单位、@import 样式导入、全局样式和局部样式
③ 能够使用 app.json 对小程序进行全局性配置
⚫ pages、window、tabBar、style
④ 能够使用 page.json 对小程序页面进行个性化配置
⚫ 对单个页面进行个性化配置、就近原则
⑤ 能够知道如何发起网络数据请求
⚫ wx.request() 方法、onLoad() 事件

## 亿些细节
小程序模拟器有时候与实际效果不符合 ， 要手机扫描查看真实效果