小程序从零开始 新手必看(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
下一章讲如何获取地理位置 获取城市名 省份