系列文章目录

【零基础微信小程序入门开发】小程序介绍及环境搭建
【零基础微信小程序入门开发】配置小程序
【零基础微信小程序入门开发】小程序框架一
【零基础微信小程序入门开发】小程序框架二
👉【零基础微信小程序入门开发】基础能力（一）

基础能力

在学习小程序中，我们必须要接触小程序的一些基础能力，从而实现一些业务的开发，例如上传图片下载文件，或者是通过接口返回的数据进行渲染来完成一些事件的触发，基础能力包括：网络请求、文件读写、存储，以及渲染画布等，这里呢我们着重讲几个，其他的例如分包下载、按需注入等因为不满足这次的零基础开发，对于还没上手的同学有一定的难度，大家学习的话可以参考其他学习资料

网络

介绍

每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信。包括普通 HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）。在小程序进行使用的时候，与外部服务器进行数据交互的能力，在前几章的学习中我们提到了下【服务器域名】、【业务域名】以及【不校验合法域名】等这样的词汇，今天来说一下这几个的关系，在小程序完成发布上线呢我们需要将服务器域名配置在小程序的后端中，如果不配置的话，我们举个例子，假如小程序的上传接口是 https://www.baidu.com 当我们开发时可以勾上【不校验合法域名】以便我们快速的开发，勾上后就可以在模拟器上正常使用，完成开发，当发布上线小程序时如果我们没有在后端【配置合法域名】的话，那我们的小程序在手机（真机）上是不通网络的，所以当你在完成开发后，记得把https://baidu.com配置到【服务器域名】中去，再通过【不校验合法域名】工具尝试下是否取消了勾选还能访问网络，如果能，那发布后，真机上的也可以使用 ，这里呢【服务器域名】配置是需要SSL认证过后，所以你的小程序的通讯域名必须是认证过的，如果是国内服务器的话，也就是域名需要备案，才能申请到SSL证书的

配置服务器域名

在部署中只需要在后台点击【开发管理】中的【开发设置】找到服务器域名即可


这里的https是http加密后的，包括wss也是一样的，如何认证ssl我们后面再说，像一些即时通讯服务例如MQTT来说，需要将ws认证为wss 我在博客中也有介绍，能快速的将一个MQTT服务完成WSS认证，我在这部分踩坑很久，如果大家遇到MQTT在WSS部署相关的问题可以参考我这篇文章解决微信小程序MQTT真机连接问题与合法域名配置SSL问题

使用网络请求

在这里，我们只对wx.request做演示
通过点击触发网络请求，接收参数渲染前端模板

1、首先 我们新建一个按钮

<button bindtap="requests" type="primary">网络请求</button>

2、绑定对应的事件

 requests:function(){


  },

3、通过在该方法内写入wx.request请求方法
【我们通过一个接口来进行演示，接口地址 我选的是天气接口，通过点击触发网络请求返回数据来实现文本的渲染】

接口地址：

将上面的链接复制后放在js的wx.request请求url里

wx.request({
url: 'example.php', //仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})

最终效果：
显示【昆明】的原是空白，通过网路请求到数据后返回数组，最后打印在前端

wxml代码：

<view></view>
{{tp['city']}}
<button bindtap="requests" type="primary">网络请求</button>

js代码：

  requests:function(){
    let that=this;

    wx.request({
      url: 'https://api.vvhan.com/api/weather?city=%E6%98%86%E6%98%8E', //仅为示例，并非真实的接口地址
      data: {
 
      },
      header: {
      'content-type': 'application/json' // 默认值
      },
      success (res) {
      console.log(res.data)
      that.setData({
        tp:res.data
      })
      }
      })

  },

以上，就是我们今天需要讲解的内容！