欢迎光临
我的个人博客网站

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

大家可以搜索 菜鸟百宝箱 小程序查看我的小程序会持续更新 每次审核需要大约一天时间

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

今天来讲如何对接接口

一.准备

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

然后就是上一章的代码

二.开始

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

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

 

 

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

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

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

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

 

然后就在

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

 

 创建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',     })   },   })

创建文件

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

 

 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

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

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 小程序从零开始 新手必看(2)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏