经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » JavaScript » 查看文章
小程序从零开始 新手必看(2)
来源：cnblogs　　作者：hpr　　时间：2021/5/31 12:33:22　　对本文有异议

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

今天来讲如何对接接口

一.准备

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

然后就是上一章的代码

二.开始

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

 

 

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

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

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

 

然后就在

 

 创建index文件这是主页

然后在index.wxml里加入代码

  1. bindtap为点击时跳转页面的方法 可以理解为点击事件
  1. <view class="container">
  2.   <view class="lssdjt">
  3.     <view class="lsCon" bindtap="goLssdjt">
  4.     历史上的今天
  5.     </view>
  6.   </view>
  7. </view>

index.wxss里加入代码

  1. .lssdjt{
  2.   width: 100%;
  3.   height: 100px;
  4. }
  5. .lsCon{
  6.   background-color: #1BA160;
  7.   height: 100%;
  8.   margin:10px;
  9.   font-size: 25px;
  10.   border-radius: 10px;
  11.   text-align: center;
  12.   line-height: 100px;
  13.   color: #fff;
  14. }
  15. .conList{
  16.   height: 100%;
  17.   margin:10px;
  18.   font-size: 25px;
  19.   border-radius: 10px;
  20.   line-height: 100px;
  21.   display: flex;
  22. }
  24. .conList .con{
  25.   width: 50%;
  26.   height: 100px;
  27.   font-size: 25px;
  28.   border-radius: 10px;
  29.   color: #fff;
  30.   text-align: center;
  31.   background-color: #1BA160;
  32. }
  33. .conList .con:first-child{
  34.   margin-right: 5px;
  35. }

index.js 

  1. goLssdjt 就是跳转的方法
  1. //index.js
  2. const app = getApp()
  4. Page({
  5.   data: {
  6.     conList: []
  7.   },
  8.   onLoad: function () {
  9.    
  10.   },
  11.   
  12.   goLssdjt: function () {
  13.     wx.navigateTo({
  14.       url: '/pages/lssdjt/index',
  15.     })
  16.   },
  17.  
  18. })

创建文件

 

 index.wxml

  1. <view>
  2.   <view class="con" wx:for="{{conList}}" wx:key="unique">
  3.     {{item.title}}
  4.   </view>
  5. </view>

index.wxss

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

index.js

  1. // pages/lssdjt/index.js
  2. Page({
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8.     conList:[]
  9.   },
  11.   /**
  12.    * 生命周期函数--监听页面加载
  13.    */
  14.   onLoad: function () {
  15.     wx.request({
  16.       url: 'https://route.showapi.com/119-42?showapi_appid=626844&showapi_sign=9347d0ce0bf64f93a9fa075e0fd96da5',
  17.       success: (res) => {
  18.         let conList = res.data.showapi_res_body.list
  19.         this.setData({
  20.           conList
  21.         })
  22.         console.log(conList);
  23.       }
  24.     })
  25.   },
  27.   /**
  28.    * 生命周期函数--监听页面初次渲染完成
  29.    */
  30.   onReady: function () {
  32.   },
  34.   /**
  35.    * 生命周期函数--监听页面显示
  36.    */
  37.   onShow: function () {
  39.   },
  41.   /**
  42.    * 生命周期函数--监听页面隐藏
  43.    */
  44.   onHide: function () {
  46.   },
  48.   /**
  49.    * 生命周期函数--监听页面卸载
  50.    */
  51.   onUnload: function () {
  53.   },
  55.   /**
  56.    * 页面相关事件处理函数--监听用户下拉动作
  57.    */
  58.   onPullDownRefresh: function () {
  60.   },
  62.   /**
  63.    * 页面上拉触底事件的处理函数
  64.    */
  65.   onReachBottom: function () {
  67.   },
  69.   /**
  70.    * 用户点击右上角分享
  71.    */
  72.   onShareAppMessage: function () {
  74.   }
  75. })

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

赋值需要用

  1. this.setData

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

 

原文链接：http://www.cnblogs.com/hprBlog/p/14830450.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号