首页 > 编程语言 >vscode开发小程序2

vscode开发小程序2

时间:2023-04-14 14:58:12浏览次数:30  
标签:轮播 api vscode request 程序 域名 开发 result 页面

开发tab:

    1.下载阿里图标到新建文件夹icons里面

    2.在app.json里面的“windows”同层下设置tab:

 

默认样式的设置:小程序中不识别通配符*!

 

     1.

 

    2.查看效果,其他确实是默认的了:

  

 

定义主题颜色:

    1.在全局appwxss中声明

  

 

    2.在页面中使用定义的这个主题颜色变量

 

    3.查看效果:

 

使用自定义组件:

    1.新建组件

    2.声明应用:

      哪个页面要用该组件,就在哪个页面的json文件里面进行声明。

      通过键值对的方式进行相对路径的引用。

 

    3.使用组件:

    4.为组件定义css样式,这里新建一个.less的样式文件,在里面抒写,写完保存后会自动生成一个wxss的文件:

 轮播图:

   1.在页面的js文件中的data里面设置轮播图的列表,在页面一加载便发送异步请求或得图片信息:

    2.查看是否真的接受并赋值给列表了:

 

 

    3.轮播图的动态渲染及样式自适应的设置:

    

复制代码
.index_swiper{
    swiper{
        // width: 750rpx;
        height: 340rpx;
        image{
            width:100%;
        }
    }
}
复制代码

对于可能出现的域名403没有权限的解决方法:

     1.点击详情 -> 勾选不进行域名的合法校验。

     2.或者:添加域名到小程序后台的白名单中(产品上线后推荐使用的方式):

      进入到微信公众号开发平台->开发->服务器域名->request合法域名(在这里进行添加即可)

代码优化——避免异步请求的回调陷阱:

    通过es6的promise解决:

    1.新建:

 

    2.原先的请求方式:

复制代码
    // 1.发送异步请求获取轮播图数据:
    var reqTask = wx.request({
      url: 'https://api.zbztb.cn/api/public/v1/home/swiperdata',
      success: (result)=>{
        // console.log(result)
        this.setData({
          swiperList:result.data.message
        })
      },
      // fail: ()=>{},
      // // 成功或者失败都会调用的回调函数:
      // complete: ()=>{}
    });
复制代码

    改用请求方式为:

    

复制代码
    request({url:"https://api.zbztb.cn/api/public/v1/home/swiperdata"})
    .then(request => {
        this.setData({
          swiperList:result.data.message
        })
    })
   //后期要嵌套调用的话,就多用几个.then:
   //.then()
复制代码

 

 

标签:轮播,api,vscode,request,程序,域名,开发,result,页面
From: https://www.cnblogs.com/yelanggu/p/17318256.html

相关文章

  • 使用VS Code开发微信小程序
    使用VSCode开发微信小程序微信开发工具结构缺点VSCodeVSCode下载插件Chinese小程序开发助手Easylessminappvscodewxmlwechat-snippet中文乱码处理配置Easyless说明 微信开发工具说归说,但是开发微信小程序的时候,这个微信开发工具......
  • 米尔STM32MP135核心板新品发布!又一款入门级嵌入式开发平台
    自2007年意法半导体(ST)推出STM32首款Cortex-M内核MCU,十几年来,ST在MCU领域的发展是飞速向前的。而2019年ST发布了全新的STM32MPU系列产品线,STM32MP1作为新一代MPU的典范,有着极富开创意义的异构系统架构兼容并蓄了MPU和MCU双重优势,受到业界的喜爱!米尔电子作为ST官方合作伙伴,......
  • 创客开发工具 LED 显示屏 All In One
    创客开发工具LED显示屏AllInOneOLED显示屏SSD13060.96寸OLED模块4针-SSD1306技术资料(GND)链接:https://pan.baidu.com/s/13d4aumAilHTenVaGKOGj-Q?pwd=1234提取码:12340.96寸OLED模块7针-SSD1306技术资料(GND)链接:https://pan.baidu.com/s/1uxByen5j-H_Vv1yJlzYL0Q?pwd......
  • uni-app小程序添加IM聊天以及音视频
    uni-app开发小程序的过程中,需要继承IM的聊天以及音视频功能,因为我是放在分包里的,步骤如下:按照文档要求,然后在相关的界面引用就可以了。音视频引入:这里引入之后还有一个问题是你必须每次在微信开发工具构建npm一下,具体操作如下:在微信开发工具终端依次输入如下指令:npminit......
  • 3、我们做接口测试,需要开发提供接口文档。
    我们做接口测试,需要开发提供接口文档(也需要自己抓包分析,接口文档可能也会存在问题)。最重要的有一下几点:1.被测接口的地址2.接口参数,以及各个参数的说明3.必要的http头与http体(http头是可以自定义的,可以用来校验是否是自己人访问)4.接口返回什么值,以及各个......
  • 全新适配鸿蒙生态,Cocos引擎助力3D应用开发
     一、适配HarmonyOS背景HarmonyOS3.1版本自发布以来,备受广大开发者的好评,同时也吸引了鸿蒙生态众多伙伴的青睐。鸿蒙生态所强调的智慧全场景、多端联动与跨设备流转等能力,与Cocos所具有的跨平台、低功耗、高性能三大核心特点不谋而合。Cocos作为内容开发工具,将在鸿蒙生态中......
  • 基于imx8m plus开发板全体系开发教程4:Linux系统开发
    前言:i.MX8MPlus开发板是一款拥有4个Cortex-A53核心,运行频率1.8GHz;1个Cortex-M7核心,运行频率800MHz;此外还集成了一个2.3TOPS的NPU,大大加速机器学习推理。全文所使用的开发平台均为与NXP官方合作的FS-IMX8MPCA开发板(华清远见imx8mp开发板),支持Weston、ubuntu20.04、A......
  • 又一款入门级嵌入式开发平台!米尔STM32MP135核心板新品发布
    自2007年意法半导体(ST)推出STM32首款Cortex-M内核MCU,十几年来,ST在MCU领域的发展是飞速向前的。而2019年ST发布了全新的STM32MPU系列产品线,STM32MP1作为新一代MPU的典范,有着极富开创意义的异构系统架构兼容并蓄了MPU和MCU双重优势,受到业界的喜爱!米尔电子作为ST官方合作伙伴,在......
  • 如何实现一个vscode插件
    前言有时候,需要提高一些开发效率,我们通常会使用一些优秀的代码编辑器,比如vscode。在使用vscode的时候,会用到很多插件,有时候也会萌发想要去开发这个插件的念头。既然想到了,那就动手试一下。开发过程我感觉最快的上手方式不是讲一些虚头巴脑的概念,先去试一下怎么去实现一个简......
  • 如何快速开发软件?这篇文章说明白了
    随着经济迅速发展,传统软件开发模式存在研发周期长、需求转化困难、投入成本高等问题,无法适应当前业务发展速度,市场需要快速开发工具。快速开发软件可分为代码生成类、少代码类、零代码功能配置类。代码生成类相对灵活,但对用户要求高;低代码类适应性强,但对研发人员要求高;零代码功能......