微信小程序1_yolov 微信小程序-优快云博客

本文链接：https://blog.youkuaiyun.com/cloudstep/article/details/104394306

本文深入解析小程序的目录结构，包括.json配置、.wxml、.wxss及.js文件的作用。探讨了tabbar框架应用、页面修改技巧、image组件的多种模式，如widthFix、aspectFill等。介绍了js和wxml中if语句的使用，远程图片引用，以及如何通过wx.request发起网络请求。此外，还讲解了数据绑定、数组渲染、swiper组件和远程图片地址获取的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.目录结构分析

.json 配置文件

.wxml 模板文件,类似于html

.wxss 样式文件,类似于css

.js 脚本文件

根目录

2.改造默认小程序

2.1删除app.wxss中的样式

3用tabbar做框架

填坑:

a.一开始我只用了一页面"pages/index/index",两个list里面都引用了这一个页面,在左边的预览界面显示正常,可是在真机上预览就只能显示接口一个list,无论建几个list都只显示一个list,后来建立两个页面,每一个list分别引用一个页面在真机上就显示正常了,不知道是不是一个小bug

b.图片用中文命名,可能会出现问题

3页面修改

4.image组件

默认image组件尺寸是300px*225px

关键属性 src : 图片来源 mode :缩放模式常用的是widthFix

<view>widthFix 4.宽度不变,高度自动变化
  <image src="../../img/valve.png" mode="widthFix"></image>
</view>

<view class="myblue, c1">aspectFill 3.保持纵横比例图片,使图片的短边完全显示出来
  <image src="../../img/valve.png" mode="aspectFill"></image>
</view>

<view>aspectFit 2.保持纵横比例图片,使图片的长边完全显示出来
  <image src="../../img/valve.png" mode="aspectFit"></image>
</view>

<view>1.scaletoFill 不保持长宽比压缩</view>
<view class="myred, c1">
  <image src="../../img/valve.png" mode="scaleToFill"></image>
</view>

根目录也可以用"/im/valve.png"

微信小程序所有代码不能超过2M,常用图片放在本地,大型的图片放在网上

一个图片效果的例子

<view class="ad01">
    <image mode="widthFix" class="ad01-img" src="/tupian/ad01.png"></image>
</view>



.ad01{
    box-shadow:0px 2px 2px gainsboro;
    margin:4px
}

.ad01-img{width:100%;}

5.js中if语句的使用

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(new Date());
    var time = new Date().getHours();
    console.log(time);
    if (time < 20) {
      console.log("当前是白天");
    }
    if (time > 12) {
      console.log("下午好");
    }
    else{
      console.log("上午好")
    }
  },

6.wxml中if语句的使用

js文件中定义一个变量