小程序从零开始新手必看(2)

当前位置:

首页 > temp > JavaScript教程 >

小程序从零开始新手必看(2)

今天来讲如何对接接口

一.准备

一个接口网站可以自己提供也可以用网上的接口网站我用的万维易源

然后就是上一章的代码

二.开始

首先我们在微信公众平台上吧我们的接口地址配置好开发-开发管理-开发设置-服务器域名

第一个域名是获取地址时需要用到现在不需要后面我们在讲这么用

如果用的我提供的那个接口网站就配置第二个域名域名必须是https开头的 http不行

如果想用http 就这样配置但是只能测试版本用线上版本就不行了

然后就在

创建index文件这是主页

然后在index.wxml里加入代码

bindtap为点击时跳转页面的方法 可以理解为点击事件

<view class="container">
  <view class="lssdjt">
    <view class="lsCon" bindtap="goLssdjt">
    历史上的今天
    </view>
  </view>
</view>

index.wxss里加入代码

.lssdjt{
  width: 100%;
  height: 100px;
}
.lsCon{
  background-color: #1BA160;
  height: 100%;
  margin:10px;
  font-size: 25px;
  border-radius: 10px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}
.conList{
  height: 100%;
  margin:10px;
  font-size: 25px;
  border-radius: 10px;
  line-height: 100px;
  display: flex;
}

.conList .con{
  width: 50%;
  height: 100px;
  font-size: 25px;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  background-color: #1BA160;
}
.conList .con:first-child{
  margin-right: 5px;
}

index.js

goLssdjt 就是跳转的方法

//index.js
const app = getApp()

Page({
  data: {
    conList: []
  },
  onLoad: function () {
   
  },
  
  goLssdjt: function () {
    wx.navigateTo({
      url: '/pages/lssdjt/index',
    })
  },
 
})

创建文件

index.wxml

<view>
  <view class="con" wx:for="{{conList}}" wx:key="unique">
    {{item.title}}
  </view>
</view>

index.wxss

/* pages/lssdjt/index.wxss */
.con{
  background-color: #F6F6F6;
  padding: 5px;
  margin: 5px;
  border-radius: 10px;
}

index.js

// pages/lssdjt/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    conList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    wx.request({
      url: 'https://route.showapi.com/119-42?showapi_appid=626844&showapi_sign=9347d0ce0bf64f93a9fa075e0fd96da5',
      success: (res) => {
        let conList = res.data.showapi_res_body.list
        this.setData({
          conList
        })
        console.log(conList);
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

这样简单的接口就对接完毕了

赋值需要用

this.setData

下一章讲如何获取地理位置 获取城市名 省份

 来源：https://www.cnblogs.com/hprBlog/p/14830450.html

栏目列表

首页 > temp > JavaScript教程 >

小程序从零开始 新手必看(2)

小程序从零开始新手必看(2)