微信小程序开发-学习笔记_小程序编程-CSDN博客

本文链接：https://blog.csdn.net/weixin_69573732/article/details/137046981

本学习笔记整理于准备学校腾讯校园地图项目期间，用于遗忘时查漏补缺。如果能够帮助到您，那就更好啦！

1. 小程序的基本组成结构

1.1 文件组织

 // utils包下存放工具性质模块，如格式化时间的模块
 const formatTime = date => { // formatTime函数接收一个date对象
   const year = date.getFullYear()
   const month = date.getMonth() + 1
   const day = date.getDate()
   const hour = date.getHours()
   const minute = date.getMinutes()
   const second = date.getSeconds()
 
   return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}` // 返回格式化时间
 }
 
 const formatNumber = n => { // 接收一个n
   n = n.toString()
   return n[1] ? n : `0${n}`
 }
 
 module.exports = { // 向外导出该函数
   formatTime
 }

1.2 json配置文件

小程序中的各种json文件

1.2.1 app.json

1.2.2 project.config.json

1.2.3 sitemap.json

1.2.4 每个页面的json

2. 小程序的页面

2.1 新建页面

2.2 修改项目首页

2.3 WXML & WXSS & JS

WXML: Wexin Markup Language

WXSS: Weixin Style Sheets

JS

3. 小程序的宿主环境

小程序的宿主环境为小程序的运行提供了：

3.1 通信模型

3.2 运行机制

4. 组件

小程序的组件分为9大类：

4.1 视图容器组件

1. view

和<div>类似，都是块状元素，默认占据一整行，可通过display: flex旋转

2. scroll-view

可滚动的视图区域，用以实现滚动列表

 <!-- 横向滚动 -->
 <scroll-view class="..." scroll-x> 
   <view>A</view>
   <view>B</view>
   <view>C</view>
 </scroll-view>
 
 <!-- 纵向滚动 -->
 <scroll-view class="..." scroll-y> 
   <view>A</view>
   <view>B</view>
   <view>C</view>
 </scroll-view>
 <!-- 纵向滚动时必须给scroll-view加一个高度 -->

3. swiper

轮播图效果

属性：

 <!-- indicator-dots：显示轮播图小点 -->
 <swiper class="swiper-container" indicator-dots circular>
   <!-- 轮播图1 -->
   <swiper-item>
     <view class="item">A</view>
   </swiper-item>
 
   <!-- 轮播图2 -->
   <swiper-item>
     <view class="item">B</view>
   </swiper-item>
 
   <!-- 轮播图3 -->
   <swiper-item>
     <view class="item">C</view>
   </swiper-item>
 </swiper>

 // swiper的尺寸
 .swiper-container{ 
   height: 200rpx;
 }
 
 // swiper的每个item的尺寸
 .item{
   height: 100%;
   line-height: 150rpx;
   text-align: center;
 }
 
 swiper-item:nth-child(1){
   background-color: rosybrown;
 }
 
 swiper-item:nth-child(2){
   background-color:seagreen;
 }
 
 swiper-item:nth-child(3){
   background-color:slateblue;
 }

4.2 基础内容组件

1. text

文本组件，类似<span>，行内元素，一行可以有多个<text></text>

 <!-- selectable表明该text可以被用户长按选中进行拷贝之类的操作（selectable只在<text>中有用） -->
 <text selectable>18328048639</text>

2. rich-text

富文本组件，支持将HTML字符串渲染为WXML结构

比如接收服务器发送的HTML页面文件，将其在小程序中渲染

 <!-- 通过rich-text组件的nodes属性结点，把HTML字符串渲染为对应的UI结构 -->
 <rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>

3. button

按钮组件
通过open-type属性可调用微信官方功能（客服、转发、获取用户授权、获取用户信息）
属性：https://developers.weixin.qq.com/miniprogram/dev/component/button.html#示例代码
- size 按钮大小
  - default 默认大小
  - mini 小尺寸
- type 按钮样式
  - primary 绿色
  - default 白色
  - warn 红色
- plain 按钮是否镂空/背景透明
  - true
  - false
- 更多详见文档

4. image

图片组件
image组件有默认宽度（300px）、高度（240px）

 <image src="..." ></image>
 <image src="..." mode="..."></image>

！！！注意：iamge组件中有mode属性来指定图片的裁剪和缩放模式

5. navigator

页面导航组件，类似于HTML的<a>

4.3 表单组件

4.4 导航组件

4.5 媒体组件

4.6 map地图组件

4.7 canvas画布组件

4.8 开放能力

4.9 无障碍访问

5. API

6. WXML模板语法

6.1 数据绑定

数据绑定：

在.js的data中定义数据
在.wxml中使用数据

6.1.1 定义数据

 // .js
 Page({
   data:{
     info:'Hello world!',
     imgSrc:'https://...'
     msgList:[{msg:"Hello"}, {msg:"world"}],
     randomNumber: Math.random()*10  
   },
 })

Math.random()生成0~1之间任意小数

Math.random().toFixed(2)生成0~1之间任意两位小数

6.1.2 绑定数据

Mustache语法/插值表达式{{}}

 <view>{{ info }}</view>

Mustache表达式：

绑定内容（和Vue相同）

如上
绑定属性（和Vue不同，Vue：v-bind/: wx:{{}}）
```
 <image src="{{ imgSrc }}"></image>
```

运算（三元运算、算数运算）

 <view>{{ randomNumber >= 5 ？'大于5' : '小于5' }}</view>

6.2 事件绑定

6.2.1 常见事件

6.2.2 事件对象的属性

target和currentTarget的区别：

6.2.3 bindtap语法

 <button type='primary' bindtap='btnHandler'> //触发tap事件后就会给js文件传一个事件对象event(e)
   提交
 </button>

 Page({
   data:{
     ...
   },
   btnHandler(e){ // 接收事件对象event(e)
     ...
     console.log(e)
   }
 })

在事件处理函数中为data中的数据赋值

调用this.setData({

要修改的数据: 新值

})

 <button type='primary' bindtap='btnHandler'> //触发tap事件后就会给js文件传一个事件对象event(e)
   {{ count }}
 </button>

 Page({
   data:{ //data中定义初始值
     count:0
   },
   
   btnHandler(e){ // 接收事件对象event(e)
     
     this.setData({
       count: this.data.count + 1
     })
     
     console.log(e)
   }
 })

6.2.4 bindinput语法

6.3 事件传参

 <button type='primary' bindtap='btnHandler' data-msg='{{5}}'> //触发tap事件后就会给js文件传一个事件对象event(e)，事件的参数msg的值（5）会被嵌入到事件对象中
   {{ count }}
 </button>

 btnHandler(e){
   let msg=e.target.dataset.msg // 获取事件传递的参数
   console.log(msg)
 }

！！！注意 data-*='…'中传递字符串的话，不用{{}}，传递数字要用{{}}

6.4 条件渲染

 <view wx:if="{{condition}}">...</view>
 <view wx:elif="{{condition}}">...</view>
 <view wx:else="{{condition}}">...</view>

6.5 列表渲染

建议使用wx:for进行列表渲染时，都加上wx:key提高渲染效率。数组中有id就用id，若无id就建议用index

7. WXML模板样式

7.1 rpx (responsive pixel)

用于解决屏幕适配问题

7.2 样式导入

8. 全局配置

8.1 window

window常用的配置属性：

下拉效果设置：

 "window":{
   "enablePullDownRefresh":true, // 开启下拉刷新
   "backgroundColor":"#f7e6ff", // 设置下拉展示的小方块的背景色
   "backgroundTextStyle":light // 下拉刷新展示的三个小圆点的颜色
 }

上拉触底距离设置：

上拉触底指的是用户往上滑动页面，快划到页面底部时，可设置效果（如加载新数据）

8.2 tabBar

tabBar的属性：

tabBar配置：

9. 页面配置

10. 发送网络请求

10.1 网络请求限制

10.2 配置request合法域名

注意事项：

域名只支持https协议
域名不能使用ip地址（https://127.1.2…）或localhost
域名必须经过ICP备案

10.3 GET

直接调用wx.request()方法

 wx.request({
   url:'...必须为https协议，并且已经配置好域名',
   method:'GET',
   data:{ // GET也可传参，拼接到url后
     name:'zs',
     age:22
   },
   
   success:(res)->{ //发起请求成功后的回调函数
     console.log(res.data)
   }
 })

10.4 POST

直接调用wx.request()方法

 wx.request({
   url:'...必须为https协议，并且已经配置好域名',
   method:'POST',
   data:{ 
     name:'zs',
     age:22
   },
   
   success:(res)->{ //发起请求成功后的回调函数
     console.log(res.data)
   }
 })

10.5 onLoad()时加载数据

类似于Vue在挂载之后mounted()时就从服务器获取数据，wx一般在onLoad()时向服务器请求数据

10.6 跳过request合法域名限制

11. 页面导航

小程序中，实现页面跳转有两种：

声明式导航

声明一个<navigator>组件，点击组件实现跳转

编程式导航

调用小程序提供的导航API，实现页面跳转