微信开发小程序2

参考B站视频黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)_哔哩哔哩_bilibili

本篇接着上一篇文章微信开发小程序1_水w的博客-CSDN博客

目录

3.3 了解小程序的API分类

3.4 了解小程序中常用的事件

四、详细学习

 4.1 实现文本框与data之间的数据同步

 4.2 全局配置及案例

 4.3 页面配置及案例

  4.4 网络数据请求

---

3.3 了解小程序的API分类

• 事件监听API：
  • 特点：以on开头，用来监听某些事件的触发

  • wx.onWindowResize(function callback) # 监听窗口尺寸变化的事件

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

  • wx.setStorageSync('key','value')    # 向本地存储写入内容

• 异步API：
  • 特点：类似于Jquery中的$.ajax(options)函数，需要通过success、fail、complete接收调用的结果

  • wx.request() # 发起网络数据请求，通过success回调函数接收数据

3.4 了解小程序中常用的事件

• tap：绑定方式为bindtap或bind:tap，手触摸后马上离开，类似于HTML中的click事件
• input：绑定方式为bindinput或bind:input，文本框的输入事件
• change：绑定方式为bindchange或bind:change，状态改变时触发

四、详细学习

 4.1 实现文本框与data之间的数据同步

（1）定义数据

 

（2）渲染结构

 

（3）美化样式

（4）绑定input事件处理函数

 （5）展示结果：

 4.2 全局配置及案例

• window

• tabbar

全局配置的案例：

（1）导入资源images，资源可在“黑马程序员”公众号输入“微信小程序”获得，文件在“微信小程序开发基础-->day2--->资料--->images”路径下。

直接在小程序项目的文件夹下粘贴images文件。

（2） 打开app.json配置文件，在Pages快速新建3个对应的tab页面，保存修改之后，Pages文件夹下就会出现3个新的页面。

"pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact",
    "pages/index/index",
    "pages/logs/logs",
    "pages/list/list"
  ],

（3） 在app.json配置文件下，新增tabBar选项

"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"
      }
    ]
  }

（4）展示效果

 4.3 页面配置及案例

（1）常用项

（2）案例：在这3 个不同页面的json文件下编写各自的样式。 

message.json

 contact.json

home.json

  4.4 网络数据请求

处于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：

• 只能请求HTTPS 类型的接口
• 必须将接口的域名添加到信任列表

1、配置request合法域名

eg：

• 需求描述：假设在自己的小程序中，希望请求https://www.escook.cn域名下的接口
• 配置步骤：登录小程序管理后台-->开发-->开发管理-->开发设置-->服务器域名-->修改request合法域名
• 注意：
  • 域名只支持HTTPS协议
  • 域名不使用IP地址或localhost
  • 域名必须经过ICP备案
  • 服务器域名一个月之内最多可以申请5 次修改
• 流程：

（1） 

 （2）微信扫描登录之后，添加request合法域名，

 （3）点击“保存并提交”后，返回之后可以看到已经添加成功了，

（4） 我们又回到微信开发者工具中，点击刷新之后，可以看到我们刚刚新添加的request合法域名，

2、发起GET请求

（1）在home.wxml文件下编写代码

<!--pages/home/home.wxml-->
<button bindtap="getInfo">发起GET请求</button>

 （2）在home.js中，编写getInfo()事件

 //发起GET请求
  getInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/get',
      method: 'GET',
      data: {
        name: 'zaaa',
        age: 22
      },
      success: (res) => {
        console.log(res)
      }
    })
  },

（3）展示结果：

3、跳过request合法域名校验