专栏首页算法与编程之美微信小程序|数据同步接口和调屏

微信小程序|数据同步接口和调屏

问题描述

很多小程序都是由一个网页或者软件简化而来的,那么网页有的东西小程序也要有。为了让开发小程序的时候可以简单快速我们会用数据接口的方式将网页上的数据爬取下来同步到小程序上。那如何才能将网页上的数据搬到小程序上面呢?

我们在做小程序开发的时候会发现不同的手机对应的分辨率不一样,如果直接调屏幕就会很麻烦,那么如何直接设置小程序让它适用于所有的手机屏呢?

解决方案

数据同步接口时需要找一个没有加密的网站,使用微信开发中的数据同步接口来定义获取后台的数据,再用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中所需调屏的内容中调用。

本文分享自微信公众号 - 算法与编程之美(algo_coding)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SpringBoot开发案例之Starter运行原理

    使用过 SpringBoot 的小伙伴都应该知道,SpringBoot 通过引入一些 Starter 大大简化了项目配置。下面以邮件发送为例,来分析一下 Sta...

    小柒2012
  • jenkins热部署项目到tomcat全过程

    配置线上的Tomcat服务器: 在conf文件夹的tomcat-users.xml文件中添加如下代码,给Tomcat配置用户名和密码,热部署必须要有用户名和...

    似水的流年
  • 使用IDEA开发Spring入门程序

    使用IDEA创建一个名为newspringdemo的项目,并将Spring的4个基础模块和第三方依赖模块commons-logging-1.2导入到Maven项...

    泰斗贤若如
  • Python+selenium自动下载xml或exe文件

    笔者最近在写一个小工具,需要从pubmed上批量下载包含文献信息的xml文件。很明显,这是一个爬虫任务,笔者选用了python+selenium的组合。代码写好...

    一只羊
  • SpringBoot 2.0 + Nacos + Sentinel 流控规则集中存储

    Sentinel 原生版本的规则管理通过API 将规则推送至客户端并直接更新到内存中,并不能直接用于生产环境。不过官方也提供了一种 Push模式,扩展读数据源R...

    小柒2012
  • SpringBoot 2.0 开发案例之百倍级减肥瘦身之旅

    为了存我的小黄图,最近在做一款图床服务,集成了各种第三方云存储服务,目前正在内部测试阶段。项目是以Jar的形式运行在腾讯云上,不要问我为什么使用腾讯云了,因为阿...

    小柒2012
  • Python学习案例之图片人脸检测识别

    随着科技的发展,人脸识别技术在许多领域得到的非常广泛的应用,手机支付、银行身份验证、手机人脸解锁等等。

    小柒2012
  • springboot解决PUT请求接收不了参数

    在web.xml添加filter来允许所有的put方法,来允许所有的put请求方法带参访问。

    似水的流年
  • Spring读取mybatis在多个jar包下的的mapper文件

    刚开始的时候我的配置文件在同名目录下都是在/mapper下,导致只能读取一个jar中的mapper文件。先解决如下: 1.将mapper文件放在不能放在同名的目...

    似水的流年
  • 记录一次 Spring boot 应用排错过程

    一个spring boot开发的项目,spring boot版本是1.5.7,携带的spring版本是4.1.3。开发反馈,突然在本地启动不起来了,表象特征就是...

    搜云库技术团队

扫码关注云+社区

领取腾讯云代金券