精华内容
下载资源
问答
  • 小程序api接口怎么对接
    千次阅读
    2020-11-23 16:47:19

    微信小程序封装api接口

    一.在until文件夹下面创建api.js和http.js(文件名可以自定义,后期引入的时候要注意)
    在这里插入图片描述

    2.在http.js里面写一下公共域名,请求方式等,需要再api.js里引用(以下代码复制即刻,需改一下域名)

    module.exports = {
      http(url, method, params) {
        let token = 'token' // 获取token,自行获取token和签名,token和签名表示每个接口都要发送的数据
        let sign = 'sign' // 获取签名 (后台怎么定义的,就传什么)
        let data = {
          token,
          sign
        }
        if (params.data) { // 在这里判断一下data是否存在,params表示前端需要传递的数据,params是一个对象,有三组键值对,data:表示请求要发送的数据,success:成功的回调,fail:失败的回调,这三个字段可缺可无,其余字段会忽略
          for (let key in params.data) { // 在这里判断传过来的参数值为null,就删除这个属性
            if (params.data[key] == null || params.data[key] == 'null') {
              delete params.data[key]
            }
          }
          data = { ...data, ...params.data }
        }
        wx.request({
          url: '域名' + url, // 就是拼接上前缀,此接口域名是开放接口,可访问
          method: method == 'post' ? 'post' : 'get', // 判断请求类型,除了值等于'post'外,其余值均视作get 其他的请求类型也可以自己加上的
          data,
          header: {
            'content-type': 'application/json'
          },
          success(res) {
            params.success && params.success(res.data)
          },
          fail(err) {
            params.fail && params.fail(err)
          }
        })
      }
    }
    

    3.在api.js里面要定义接口,管理所以接口.便于维护,在该文件中需引入http.js文件(以下代码复制即刻)

    // 在这里面定义所有接口,一个文件管理所有接口,易于维护
    import { http } from './http'; // 引入刚刚封装好的http模块,import属于ES6的语法,微信开发者工具必须打开ES6转ES5选项
    
    function femaleNameApi(params) { // 请求***接口
      http('/getDate', 'get', params)  // 接口请求的路由地址以及请求方法在此处传递
    }
    
    // 每一个接口定义一个函数,然后暴露出去,供逻辑代码调用
    
    function novelApi(params) { // 请求***接口
      http('/novelApi', 'get', params)
    }
    
    export default { // 暴露接口
      femaleNameApi,
      novelApi
    }
    

    4.在相对应的文件里面调用api.js文件
    在这里插入图片描述
    如有疑问敬请留言评论!

    更多相关内容
  • 微信小程序:调用API接口

    千次阅读 2021-09-11 10:03:00
    复制API接口,然后要现在第一个?前面加上appkey,然后name可以换成变量,最后的10是显示的条数,也可以改。 最后效果是可以查询你想要查询的学校。并且点击可以进入其官网。 效果图: one2.js /...

    首先去果创云之类的API调用的网站找到你想调用的API

    以大学查询接口为例

     

    复制API的接口,然后要现在第一个?前面加上appkey,然后name可以换成变量,最后的10是显示的条数,也可以改。

     

    最后效果是可以查询你想要查询的学校。并且点击可以进入其官网。

    效果图:

     

    one2.js

    // pages/one2/one2.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
    
        schoolInfos:[],
        key:"",
        len:-1
        
    
      },
      inputValue(event)
      {
          console.log(event);
          //在方法内定义的变量  属于局部变量
          let   value=event.detail.value;
          console.log(value);
       
          //扩大value这个局部变量的作用域
          this.setData({key:value});
    
      },
      query()
      {
        let  skey =this.data.key;
         console.log(skey);
         console.log(typeof  skey);
    
         if(skey=="")
         {
           //提示框,提示用户
            wx.showToast({
              title: '没有输入查所有',
              icon:"loading",
              duration:5000
    
            })
         }
          wx.request({
          url: 'http://hn216.api.yesapi.cn/?app_key=0099454C3FF0A9912DE7A0346CCC2CC5&s=App.Common_University.Search&return_data=0&school_name='+skey+'&top_num=50',
          success:(resp)=>
          {
             let  arrs=resp.data.data.schools;
              console.log(arrs);
              let  arrLength=arrs.length;
              console.log(arrLength);
              this.setData({len:arrLength,schoolInfos:arrs});
    
          }
        })
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
       /** wx.request({
          url: 'http://hn216.api.yesapi.cn/?app_key=0099454C3FF0A9912DE7A0346CCC2CC5&s=App.Common_University.Search&return_data=0&school_name=科技&top_num=50',
          success:(resp)=>
          {
    
            let  arrs=resp.data.data.schools;
              console.log(arrs);
    
              this.setData({schoolInfos:arrs});
    
          }
        })**/
    
      },
      clickschool(event)
      {
          let   url=event.currentTarget.dataset.url;
          console.log(url);
    
          wx.navigateTo({
            url: '../school/school?url='+url,
          })
    
    
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

    one2.json

    {
      "usingComponents": {}
    }

    one2.wxml

    <!--pages/one2/one2.wxml-->
    <view class="pageview">
      <view  class="sview">
        <input  class="inputview"  type="text"   bindinput="inputValue" placeholder="输入你所想要查询的学校的关键词" />
        <view   class="tvview">
          <image bindtap="query"   src="../images/jr3.jpg" class="cimg"></image>
        </view>
      </view>
    
      <view class="infoview">
       <block  wx:if="{{len==0}}">
          <view>请重新查询</view>
       </block>
       <block  wx:if="{{len>0}}">
        <block  wx:for="{{schoolInfos}}">
         <view  class="schoolview"  bindtap="clickschool"  data-url="{{item.school_website}}">
            <view class="tv1">学校名称:{{item.school_name}}</view>
            <view class="tv2">学校等级:{{item.school_level}}</view>
            <view class="tv3">学校地址:{{item.school_province}}{{item.school_city}}</view>
         </view>
         </block>
       </block>
      </view>
    </view>
    

    one2.wxss

    /* pages/one2/one2.wxss */
    .pageview{
      width: 100%;
      height: 100vh;
      background-color: burlywood;
    
    }
    .schoolview{
      width: 42%;
      height: 18%;
      border:1px  solid  brown;
      margin:10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      background-color: silver;
    }
    .tv1{
      font-family: 宋体;
      font-size: 10px;
      font-weight: bold;
      flex: 1;
      width: 100%;
      border:1px  solid  snow;
      display: flex;
      align-items: center;
    }
    .tv2{
      font-family: 宋体;
      font-size: 10px;
      font-weight: bold;
      flex: 1;
      width: 100%;
      border:1px  solid  snow;
      display: flex;
      align-items: center;
    }
    .tv3{
      font-family: 宋体;
      font-size: 10px;
      font-weight: bold;
      flex: 1;
      width: 100%;
      border:1px  solid  snow;
      display: flex;
      align-items: center;
    }
    
    .sview{
      width: 100%;
      height: 8%;
      /**border-bottom: 1px  solid  black;**/
      display: flex;
      position: fixed;
      left: 0px;
      top:0px;
      z-index: 999;
      background-color: white;
      
    }
    
    .infoview{
      width: 100%;
      height: 92%;
      display: flex;
      flex-wrap: wrap;
      position: relative;
      top:8%;
      left:0px;
    }
    .inputview{
      width: 90%;
      height: 30px;
      border:1px  solid  black;
      text-align: center;
      margin-left: 4px;
      border-radius: 5px;
      font-size: 12px;
    }
    .tvview{
      width: 30px;
      height: 30px;
       /**border:1px  solid  black;**/
      display: flex;
      justify-content: center;
      align-items: center;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      margin-left: -35px;
    }
    .cimg{
      width: 100%;
      height: 100%;
      z-index: 999;
    }
    

     

     school.js

    // pages/school/school.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
    
        linkurl:""
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
        let  url=options.url;
    
        this.setData({linkurl:url});
    
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

     school.json

    {
      "usingComponents": {}
    }

     school.wxml

    <!--pages/school/school.wxml-->
    <web-view  src="{{linkurl}}"></web-view>
    

     school.wxss

    /* pages/school/school.wxss */

    展开全文
  • 查看快递鸟提供的api,探寻微信小程序端的使用情况。有几个是比较合适的:1.跳转api;2.手机查询api对接流程: 快递鸟网站申请接口KEY并认证-对接接口-调试-上线使用 二、对接准备 1.登录快递鸟注册快账号...

    原来用的快递鸟(http://www.kdniao.com)的接口有变动,现有系统上不能使用了。查看快递鸟提供的api,探寻微信小程序端的使用情况。有几个是比较合适的:1.跳转api;2.手机查询api。
    对接流程:
    快递鸟网站申请接口KEY并认证-对接接口-调试-上线使用
    二、对接准备
    1.登录快递鸟注册快账号http://www.kdniao.com/reg
    2.获取开发者账号信息(ID ,API Key),登录快递鸟后台中查看
    3.进行技术联调,并完成调试,物流查询api地址:http://www.kdniao.com/api-track
    2.按照单号识别接口和即时查询接口封装好数据
    3.获取返回的 json 数据输出

    先选择最方便的跳转api进行测试,小程序端使用web-view,但是集成之后发现要添加第三方域名到小程序的业务域名,而业务域名需要服务器文件验证

    然后想使用手机查询api,其实还是跳转到快递鸟页面去展示,同样的问题。

    再想着能不能在服务端接口里保存查询的结果页面html,由小程序端请求获得展示在页面上,毕竟这样也能省去自己写样式。同样还是出现问题,因为第三方页面并不是静态的,而是由vue异步加载的,抓取的只是网页源代码。(这里肯定是有相关方法可以实现,暂时先不往这方向考虑。)然后想着再找这个异步的请求,浏览器F12调出开发者工具,选择network
    在这里插入图片描述
    找到之后时候postman之类的工具尝试请求查看结果,看能否重现结果,分析请求参数,添加了主要的几个(postid:快递单号;type:快递公司编码),甚至后来添加了platform、token和temp,结果很遗憾,返回的结果每次都不一样
    在这里插入图片描述
    在这里插入图片描述
    有时能查到结果,有时不能,但是并不是输入的快递单号的结果。快递100接口构建失败。对了,设置了headers相关属性也是
    在这里插入图片描述
    所以只能找其他独立的物流api,通过百度,找到几个:快递鸟、快递100,菜鸟物流云等

    由于时间关系,初步看了下相关api,快递鸟和菜鸟物流云都是免费的,快递鸟的和快递100的类似,文档详细,还有demo可以下载。菜鸟物流云的没细看,但毕竟是阿里的,应该不至于差。

    本文记录思路,仅供参考,应该问题不大。

    展开全文
  • 微信小程序调用api接口实例

    万次阅读 多人点赞 2020-11-25 17:55:12
    wx.request({ // url: 'https://movie.querydata.org/api?id=1302427', url: 'https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&sort=recommend&id="25907124"', method: 'GET', // ...

    页面效果:

    1、首先在微信开发者工具中开启http域名

    2、然后回到开发者工具中,找到详情=》项目配置,进行刷新或者重新编译

    3、在index.wxml页面中写一个button:

    <view>
        <button bindTap="test">测试</button>
    </view>

     4、在index.js文件中写入方法:

    text:function(){
        var that = this;
        wx.request({
          // url: 'https://movie.querydata.org/api?id=1302427',
          url: 'https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&sort=recommend&id="25907124"',
          method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
          // header: {}, // 设置请求的 header
          header: {
            'content-type': 'application/xml'
          },
          success: function(res) {
            if(res.statusCode == 200){
              that.setData({   
                movieArr : res.data,
              
              }) 
              console.log(res.data)
            }
           
          },
          fail: function() {
            wx.showToast({
              title: "网络连接失败",
              duration: 3000
            })
    
          },
        })
    }

    5、在wxml页面中进行数据绑定:

    <!--index.wxml-->
    <view class="container">
    
      <view class="movies">
        <view class="movie-sty" wx:for="{{movieArr.subjects}}" wx:for-item='item'>
          <view class="left">
            <image src="{{ item.cover }}"></image>
          </view>
        
          <view class="right">
            <view class="title">{{item.title}}</view>
            <view class="descripe">
              <view>评分:{{ item.rate }}</view>
              <view>传送门:<text style="color:red;margin-top:10rpx;">{{item.url}}</text></view>
            </view>
            
            <navigator class="btn-sty" url="/pages/details/index">
              <button size="mini" style="font-size:12px;">详情>></button>
            </navigator>
          </view>
        </view>
      </view>
      
    
    </view>
    

    6、index.wxss文件中设置样式:

    /**index.wxss**/
    page{
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .container {
      background: #f6f6f6;
      width: 100%;
    }
    .movies {
      width: 100%;
    }
    .movie-sty {
      width: 100%;
      height: 400rpx;
      border-radius: 5px;
      background-color: #fff;
      margin: 2% 0;
      display: flex;
      justify-content: space-around;
    }
    .left{
      width: 50%;
      height: 400rpx;
      margin-left: 2%;
      border-radius: 5px;
    }
    .left image{
      width: 100%;
      height: 100%;
      border-radius: 5px;
    }
    .right {
      width: 45%;
      /* padding: 40rpx 20rpx; */
      font-size: 14px;
    }
    .right .title {
      font-size: 15px;
      font-weight: bold;
      margin: 10% 5%;
    }
    .right .descripe {
      margin: 5% 5%;
      width: 90%;
      height: 50%;
      word-break:break-all;
      font-size: 12px;
    }
    .btn-sty {
      margin-left: 50%;
    }

    齐活!

     

    展开全文
  • 在微信提供的接口文档中提供了一个微信支付接口,应该是直接调用这个接口就可以发起微信支付 文档路径:https://developers.weixin.qq.com/miniprogram/dev/api/api-pay.html#wxrequestpaymentobject 但是,当开始...
  • 前言微信小程序不存在ajax,那么它是如何实现数据请求功能的呢?在微信中提供了API的调用wx.request(OBJECT),这个是很不错的。下面就讲一下如何请求数据,简单到不行。wx.request看文档时,提供了示例模板如下:wx....
  • 微信小程序API接口,其中的图片函数wx.chooseImage的使用实例跟源码。
  • 1.使用云函数调用api接口需要使用第三方库,以request为例2.在github上搜索request或request-promise方法3.安装npm install --save requestnpm install --save request-promise4.右键cloudfunctions-“新建Node.js云...
  • 微信小程序API文档:获取二维码 一、简介 通过后台接口可以获取小程序任意页面的二维码,扫描该二维码可以直接进入小程序对应的页面。目前微信支持两种二维码,小程序码(左),小程序二维码(右),如下所示:  ...
  • 微信小程序实现智能饲喂后台数据对接,登录,注册,数据查询
  • 最新追书神器API文档,适合做阅读类小程序,APP等开发,全网免费书籍资源应有尽有,小说分类,小说排行,书城,搜索,我的书架,章节信息,内容,方便二次开发,需要的请自行下载。
  • 主要介绍了Java 调用Restful API接口的几种方式(HTTPS),编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随编过来看看吧
  • 微信小程序调用API接口不通

    千次阅读 2019-07-08 14:10:39
    Question 不在以下 request 合法域名列表中,请参考文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html 解决方案 one 微信开发者工具右上角 — 详情 — ...two 如果还没有解决...
  • 安装环境需要PHP5.6坏境以下,数据库版本5.6以上,域名需要有HTTPs协议,其它的大家自行去研究吧,如果API失效,我这里是有新的API接口,关于如何获取API的话,压缩包里有详细的说明,大家自行去查看。 安装说明:...
  • 三、小程序登录流程梳理: 1、小程序端调用wx.login 2、判断用户是否授权 3、小程序端访问 wx.getUserInfo 4、小程序端js代码: wx.login({ success: resp => { // 发送 res.code 到后台换取 openId, sessionKey,...
  • 电费话费充值api接口就是能够专业让大家实现话费充值平台的一个接口,只有接入了话费充值api接口才能够实现话费电费充值。 很多人看到这里就会问了,一般我们充值话费的话淘宝、支付宝、微信就可以满足了,何必要...
  • 请求的第三方微信url大概有3种1)$url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=$appid&secret=$appsecret&code=$code&grant_type=authorization_code";2)$url = ...
  • 小程序解析短视频接口API开发文档

    万次阅读 2022-04-09 09:37:05
    接口开发文档 去水印接口 请求地址:https://api.srvv.cn/api/video/32AFD1F6A24A3A49921AB80AE1C58035ED01CC5DF282B23D79/2/?url={短视频链接,记住是纯链接} 接口申请地址: api.srvv.cn 请求方式:GET 返回...
  • 小程序接口对接

    千次阅读 2018-05-06 10:59:07
    wx.request({ url: 'https://api.changching.cn/api/v4/sermanstars/', method: 'POST', header: { 'Accept': "*/*", 'Authorization': 'Token '...
  • 小程序api 的链接

    2022-04-04 08:50:21
    讲真,对与网上提供的api数据接口,个人认为小程序对接是最简单直接的了,近乎傻瓜式的操作,真的是得心应手!和一些数据的对接也方便了。 基本上就几部。 第一,登录微信公众平台 找到开发管理,中的开发设置...
  • 内容索引:VB源码,API专区,API VB API操作小程序源码集,全部是用API写的小程序,列举一部分:  利用API制作ListBox的索引  截获鼠标消息  图像框模拟标题栏  文本框的消息处理  发送消息改变窗体标题栏文本  ...
  • 因为网站要对接百度小程序,于是做了一个api,用于对接百度小程序,代码如下: <?php header("Content-type: application/json; charset=utf-8"); error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED)...
  • 接入概述接入微信小程序消息服务,开发者需要按照如下步骤完成:1、填写服务器配置2、验证服务器地址的有效性3、依据接口文档实现业务逻辑下面详细介绍这3个步骤。第一步:填写服务器配置登录微信小程序官网后,在...
  • 在全局app.js里配置全局的url urlData: { key: '1111111111', wid: '11111111', sign: '1111111111', baseURL: 'https://php.com', }, 请求后台接口 const app = getApp(); onLoad: function(options) { wxRequest...
  • 最近接到一个项目微信小程序调用百度api进行人脸识别 废话吧不多说 直接上代码 1.首先先在百度申请api 做人脸识别 这里是我的请求封装 //封装post get function $http(url, method, param = {}, lookup) { //url ...
  • 零售电商平台及ISV商家对物流api接口的需求有很多,今天我们主要分享的就是快递鸟快递单号查询接口的对接指南,快递单号查询接口对接的应用场景有很多,很多场景会遇到,最主要的就是电商网站用户打开“我的订单”时...
  • 与第三方Api接口对接需要注意的点

    千次阅读 2020-09-25 10:29:25
    与第三方Api接口对接需要注意的点 目录一、非技术对接二、技术对接三、必要措施四、常见错误解决 一、非技术对接 【重要】画出流程时序图 查看对方文档,积极沟通 本公司接口文档和图发对方确认,一定要对方明确...
  • 天气接口:和风天气API接口 位置信息:腾讯地图接口 注意:接口需要大家自行去申请,不懂百度都有,这里我就不细说了! 小程序配置合法域名 https://apis.map.qq.com https://devapi.qweather.
  • 红包接口使用流程: 两种方式: 第一种,首先由后台通过红包创建接口获取红包ticket,然后使用ticket拼装红包链接,在用户... apikey: 参数签名密钥,不超过32字节 ...
  • 微信小程序对接微信支付详细教程

    千次阅读 2022-04-09 14:58:21
    小程序 微信支付官方文档 https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_11&index=2 https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter2_8_0.shtml 前提 在进行对接微信支付...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,376
精华内容 7,750
关键字:

小程序api接口怎么对接