小程序随笔

最新推荐文章于 2022-09-13 18:30:59 发布

xumengxia—xu

最新推荐文章于 2022-09-13 18:30:59 发布

阅读量478

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_56514785/article/details/119451591

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. 小程序代码的构成 - WXML 模板

5. swiper 和 swiper-item 组件的基本使用

5.1 常用的基础内容组件

5.2 rich-text 组件的基本使用

7.2小程序中常用的事件类型绑定方式事件描述tap bindtap 或 bind:tap 手指触摸后马上离开，类似于 HTML 中的 click 事件input bindinput 或 bind:input 文本框的输入事件change bindchange 或 bind:change 状态改变时触发

7.3 WXML 模板语法 - 条件渲染

7.4WXML 模板语法 - 列表渲染通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下

7.5全局配置 - window

设置导航栏的标题

7.6全局配置 - tabBar

7.7 网络数据请求调用微信小程序提供的wx.request() 方法，可以发起 GET 数据请求

1. 小程序代码的构成 - WXML 模板

1.1WXML 和 HTML 的区别

① 标签名称不同
⚫ HTML （div, span, img, a）
⚫ WXML（view, text, image, navigator）
② 属性节点不同
⚫ <a href="#">超链接</a>
⚫ <navigator url="/pages/home/home"></navigator>

2.小程序代码的构成 - WXSS 样式

2.1 WXSS 和 CSS 的区别

① 新增了 rpx 尺寸单位
⚫ CSS 中需要手动进行像素单位换算，例如rem
⚫ WXSS 在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算
② 提供了全局的样式和局部样式
⚫ 项目根目录中的 app.wxss 会作用于所有小程序页面
⚫ 局部页面的 .wxss 样式仅对当前页面生效
③ WXSS 仅支持部分 CSS 选择器
⚫ .class 和 #id
⚫ element 元素选择器
⚫ 并集选择器、后代选择器
⚫ ::after 和 ::before 等伪类选择器

3.css横向布局

//关闭黄色叹号提示，找到 project.config.json下的checkSiteMap 改为 false
 "checkSiteMap": false,


// 弹性布局flex
 display:flex;

2.3  justify-content:
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

4.纵向滚动

<!-- 纵向滚动 -->
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>


.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1) {
  background-color: antiquewhite;
}
.container1 view:nth-child(2) {
  background-color: red;
}
.container1 view:nth-child(3) {
  background-color: pink;
}
.container1 {
  border: 1px solid red;
  height: 120px;  //必须加宽度或者高度实现滚动
  /* margin-top: 20px; */
  /* display: flex; */
  /* justify-content: space-around; */
}

5. swiper 和 swiper-item 组件的基本使用

实现如图的轮播图效果：

swiper 组件的常用属性
属性类型默认值说明
indicator-dots boolean false 是否显示面板指示点
indicator-color color rgba(0, 0, 0, .3) 指示点颜色
indicator-active-color color #000000 当前选中的指示点颜色
autoplay boolean false 是否自动切换
interval number 5000 自动切换时间间隔
circular boolean false 是否采用衔接滑动

<!-- 轮播图的结构 -->
<swiper>
<!-- 第一个轮播图 -->
<!--  -->
<swiper-item class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="#ccc">
<view class="item">A</view>
</swiper-item>
<!-- 第2个轮播图 -->
<swiper-item class="swiper-container">
<view class="item">2</view>
</swiper-item>
<!-- 第3个轮播图 -->
<swiper-item class="swiper-container">
<view class="item">3</view>
</swiper-item>
</swiper>

/* pages/list/list.wxss */
.swiper-container {
  height: 150px; /*轮播图容器的高度*/
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) {
  background-color: antiquewhite;
}
swiper-item:nth-child(2) {
  background-color: red;
}
swiper-item:nth-child(3) {
  background-color: pink;
}

5.1 常用的基础内容组件

① text
⚫ 文本组件
⚫ 类似于 HTML 中的 span 标签，是一个行内元素
② rich-text
⚫ 富文本组件
⚫ 支持把 HTML 字符串渲染为 WXML 结构

通过 text 组件的 selectable 属性，实现长按选中文本内容的效果：

<view>
<!-- /* 手机号长按复制效果 */ -->
<text selectable >12222297790</text>
</view>

5.2 rich-text 组件的基本使用

通过 rich-text 组件的 nodes 属性节点，把 HTML 字符串渲染为对应的 UI 结构：

<view>
<!-- 应用场景：商品详情页的结构渲染 -->
<rich-text nodes="<h1 style='color:red;'>biaoti</h1>"></rich-text>
</view>

5.3 button 按钮的基本使用

<!-- 通过type 指定按钮的类型 -->
<button>默认按钮</button>
<!-- plain 楼空按钮 type="warn警告按钮"-->
<button plain size="mini" type="primary"> 注册掉按钮</button>

5.4 image 组件的基本使用

image 组件的 mode 属性用来指定图片的裁剪和缩放模式，常用的 mode 属性值如下：
mode 值说明
scaleToFill （默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill
缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方
向是完整的，另一个方向将会发生截取。
widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

<!-- 1.空图片 -->
<image></image>
<img src="/images/1.png" mode="aspectFit" alt="">
image {
  <!-- 通过边框线证明image有默认宽和高 -->
  border:1px solid red
}

6.小程序的宿主环境 - API

小程序 API 的 3 大分类

小程序官方把 API 分为了如下 3 大类：
① 事件监听 API
⚫ 特点：以 on 开头，用来监听某些事件的触发
⚫ 举例：wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
② 同步 API
⚫ 特点1：以 Sync 结尾的 API 都是同步 API
⚫ 特点2：同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
⚫ 举例：wx.setStorageSync('key', 'value') 向本地存储中写入内容
③ 异步 API
⚫ 特点：类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接收调用的结果
⚫ 举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据

7.1 WXML 模板语法 - 数据绑定

在 data 中定义页面的数据

7.2小程序中常用的事件类型绑定方式事件描述
tap bindtap 或 bind:tap 手指触摸后马上离开，类似于 HTML 中的 click 事件
input bindinput 或 bind:input 文本框的输入事件
change bindchange 或 bind:change 状态改变时触发

当事件回调触发的时候，会收到一个事件对象 event，它的详细属性如下表所示：
属性类型说明
type String 事件类型
timeStamp Integer 页面打开到触发事件所经过的毫秒数
target Object 触发事件的组件的一些属性值集合
currentTarget Object 当前组件的一些属性值集合
detail Object 额外的信息
touches Array 触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches Array 触摸事件，当前变化的触摸点信息的数组

<!-- 模板语法 - 数据绑定 -->

<!-- 事件绑定 tap手指触摸属性-->
<button type="primary" bindtap="btnTapHandler">按钮</button>
<!-- 调试里面的AppData防止所有的数据-->
<button style="margin-top:10px" type="primary" bindtap="CountChange">加1</button>
<!-- 数据传参 data-* 自定义属性传参，其中 * 代表的是参数的名字 -->
<!-- 通过 event.target.dataset.参数名 即可获取到具体参数的值 -->
<button style="margin-top:10px" type="primary" bindtap="btnTap2" data-info="{{2}}">加2</button>
<!-- input输入框的事件 处理函数-->
<input value="{{msg}}" bindinput="inputHandler"></input>



// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {    
    count:0,
    randomNum: Math.random() * 10, // 随机生成10个数字
    // Math.random().toFixed(2)  生成一个带2位小数的随机数，例如0.34
    msg:'你好',
  },
  // 事件处理函数
  btnTapHandler(e) {
    console.log(e)
  },
  // +1按钮的处理
  CountChange() {
    this.setData({
      count: this.data.count + 1
    })
  },
    // +2按钮的处理
  btnTap2(e) {
    this.setData({
      count: this.data.count + e.target.dataset.info
    })
  },
  // input输入框的处理函数
  inputHandler(e) {
    // console.log(e.detail.value)
    this.setData({
      msg: e.detail.value
    })
  }
})

7.3 WXML 模板语法 - 条件渲染

在小程序中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块

<!-- 条件渲染 -->
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>
<!-- 结合block 使用wx:if 不会渲染block标签-->
<block wx:if="{{false}}">
<view>view1</view>
<view>view2</view>
</block>
<!-- hidden="{{contain}}" -->
<view hidden="{{flag}}">条件为true的时候隐藏元素，否则隐藏</view>



// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {    
   
    flag:true,
  },
 
})

7.4WXML 模板语法 - 列表渲染通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下

<!-- 列表渲染 wx:for -->
<view wx:for="{{arr1}}" wx:key="index">
索引是：{{index}}; 当前项是：{{item}}
</view>
<!-- 更改index索引的变量名字 -->
<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx" >
索引是：{{idx}}; 当前项是：{{itemName}}
</view>
<!--  wx:key 的使用 -->
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>


// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {    
   
    arr1:['苹果', '小米','华为'],
    userList: [
      {id:1, name:'小红'},
      {id:2, name:'小百'},
      {id:3, name:'小率'},
    ]
  },
 
  // input输入框的处理函数
  inputHandler(e) {
    // console.log(e.detail.value)
    this.setData({
      msg: e.detail.value
    })
  }
})

7.5全局配置 - window

了解 window 节点常用的配置项
属性名类型默认值说明
navigationBarTitleText String 字符串导航栏标题文字内容
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如 #000000
navigationBarTextStyle String white 导航栏标题颜色，仅支持 black / white
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh Boolean false 是否全局开启下拉刷新
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离，单位为px

"enablePullDownRefresh":true 手指向下拖动刷新

{
  "pages":[
    "pages/index/index",
    "pages/list/list",
    
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light", 
    // 下拉 loading 的样式，仅支持 dark / light
    "navigationBarBackgroundColor": "#fff", //导航栏背景颜色
    "navigationBarTitleText": "拉拉阿拉", // 导航栏标题文字内容
    "navigationBarTextStyle":"black",  // 导航栏标题颜色，仅支持 black / white
    "enablePullDownRefresh":true , // 全局开启下拉刷新功能
    "backgroundColor":"#efefef", // 自定义下拉刷新窗口背景色 当全局开启下拉刷新功能之后，默认的窗口背景为白色 
    "onReachBottomDistance":"50",
    // onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离，单位为px
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

设置导航栏的标题

设置步骤：app.json -> window -> navigationBarTitleText
需求：把导航栏上的标题，从默认的 “WeChat”修改为“黑马程序员”，效果如图所示：

7.6全局配置 - tabBar

⚫ tabBar中只能配置最少 2 个、最多 5 个 tab 页签
⚫ 当渲染顶部 tabBar 时，不显示 icon，只显示文本

① backgroundColor：tabBar 的背景色
② selectedIconPath：选中时的图片路径
③ borderStyle：tabBar 上边框的颜色
④ iconPath：未选中时的图片路径
⑤ selectedColor：tab 上的文字选中时的颜色
⑥ color：tab 上文字的默认（未选中）颜色

tabBar 节点的配置项
属性类型必填默认值描述
position String 否 bottom tabBar 的位置，仅支持 bottom/top
borderStyle String 否 black tabBar 上边框的颜色，仅支持 black/white
color HexColor 否 tab 上文字的默认（未选中）颜色
selectedColor HexColor 否 tab 上的文字选中时的颜色
backgroundColor HexColor 否 tabBar 的背景色
list Array 是
tab 页签的列表，
最少 2 个、最多 5 个 tab

每个 tab 项的配置选项
属性类型必填描述
pagePath String 是页面路径，页面必须在 pages 中预先定义
text String 是 tab 上显示的文字
iconPath String 否未选中时的图标路径；当 postion 为 top 时，不显示 icon
selectedIconPath String 否选中时的图标路径；当 postion 为 top 时，不显示 icon

{
  "pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact",
    "pages/index/index",
    "pages/list/list",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light", 
    "navigationBarBackgroundColor": "#fff", 
    "navigationBarTitleText": "世纪网新", 
    "navigationBarTextStyle":"black",  
    "enablePullDownRefresh":true ,
    "backgroundColor":"#efefef", 
    "onReachBottomDistance":50  
  },
  "tabBar": {
    "list": [
      {"pagePath":"pages/home/home", 
        "text": "首页", 
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"},
      {"pagePath":"pages/message/message",
        "text": "消息",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png"
      },
      {"pagePath": "pages/contact/contact",
        "text": "列表",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

7.7 网络数据请求调用微信小程序提供的wx.request() 方法，可以发起 GET 数据请求

<button bindtap="getInfo">发起get数据请求</button>
<button bindtap="postInfo">发起POST数据请求</button>



// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  getInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/get', // 请求接口地址 必须基于https协议
      method:'GET',
      data: {
  name:'王五',
  age:33
      },
      success:(res) => {
    console.log(res.data);
      }
    })
  },
  // 发起post请求
  postInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/post',
      method:'POST',
      data: {
  name:'ZHANSAN',
  age:33
      },
      success:(res) => {
    console.log(res.data);
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

8.1在页面刚加载时请求数据

我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的onLoad 事件
中调用获取数据的函数，示例代码如下：

<button bindtap="getInfo">发起get数据请求</button>
<button bindtap="postInfo">发起POST数据请求</button>


// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  // 发起get请求
  getInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/get', // 请求接口地址 必须基于https协议
      method:'GET',
      data: {
        name:'王五',
        age:33
      },
      success:(res) => {
    console.log(res.data);
      }
    })
  },
  // 发起post请求
  postInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/post',
      method:'POST',
      data: {
  name:'ZHANSAN',
  age:33
      },
      success:(res) => {
    console.log(res.data);
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getInfo()
    this.postInfo()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

8.1跳过 request 合法域名校验

如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https
协议的接口。 详情——本地设置——不校验合法域名
此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时
开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项，
跳过 request 合法域名的校验。

注意：
跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用！

xumengxia—xu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小程序随笔

1. 小程序代码的构成 - WXML 模板1.1WXML 和 HTML 的区别①标签名称不同⚫ HTML （div, span, img, a）⚫ WXML（view, text, image, navigator）② 属性节点不同⚫ <a href="#">超链接</a>⚫ <navigator url="/pages/home/home"></navigator>2.小程序代码的构成 - WXSS 样式2.1WXSS 和 C...
复制链接

扫一扫