微信小程序|数据同步接口和调屏
问题描述
很多小程序都是由一个网页或者软件简化而来的，那么网页有的东西小程序也要有。为了让开发小程序的时候可以简单快速我们会用数据接口的方式将网页上的数据爬取下来同步到小程序上。那如何才能将网页上的数据搬到小程序上面呢？
我们在做小程序开发的时候会发现不同的手机对应的分辨率不一样，如果直接调屏幕就会很麻烦，那么如何直接设置小程序让它适用于所有的手机屏呢？
解决方案
数据同步接口时需要找一个没有加密的网站，使用微信开发中的数据同步接口来定义获取后台的数据，再用js连接到微信小程序上。需要用到很多的专有标签。
调屏就是让你所做的小程序可以在任何大小的手机上正常显示。
(1)数据同步接口网页轮播图
a．在js里面的“onLoad: function ()”下用“let _this=”给所同步的接口命名
b．在所需获取数据的网站内点击F12会出现一个界面按照图3.1.1操作
图3.1.1
c．一个鼠标所指的地方旁边的界面就会出现数据勾选你所需要的数据
图3.1.2
d．在js里面用wx.request({})中用url引出所需获取的数据的链接，并在代码栏下面的区域可以找到{data}在里面找到并用一个img[]装起来。
let _this=this;
wx.request({
url: 'http://www.xiongmaoyouxuan.com/api/tab/1',
method: "get",
success: function (res) {
console.log(res)
_this.setData({
img:res.data.data.banners,
})e．在wxml中用<block>运行上面所输入的接口。
<swiper
indicator-dots="ture"
interval="1000"
circular="ture"
autoplay="true"
style="width:{{w}}px"><block wx:for="{{img}}">
<swiper-item><image src='{{item.imageUrl}}'
style="width:{{w}}px"></image>
</swiper-item>
</block>
</swiper>就可以实现数据同步接口网页的轮播图的操作了。
（2）调屏
a．在js里面page({data{}})里面命名一个名字(根据自己的喜好)
w=0
b．在onload：function（）{}里面对刚刚的名字定义调屏
onLoad: function () {
let a =
wx.getSystemInfoSync()
.screenWidth
this.setData({
w:a
})C．在wxml中用style=”width:{{}}px”来调用
<swiper
indicator-dots="ture"
interval="1000"
circular="ture"
autoplay="true"
style="width:{{w}}px"><block wx:for="{{img}}">
<swiper-item><image src='{{item.imageUrl}}'
style="width:{{w}}px"></image>
</swiper-item>
</block>
</swiper>这样你所开发的小程序就能在任何手机屏上正常显示了。
结语
在同步接口的时候一定要接入你所需要的链接，在写代码的时候一定要注意符号的问题，在实现这一操作的时候有很多的大括号小括号逗号一定不要搞混了。在调屏幕的时候要在wxml中所需调屏的内容中调用。