小程序

o( ￣⌣￣ )o included in Other

2023-10-21 6879 words 14 minutes

Contents

参考资料

要善于查看官方的文档

p3 界面和文件目录介绍

微信开发者工具
Ctrl + 加号 放大界面
模拟器推荐使用 iPhone X，因为机型的尺寸是比较常见的 375*812
文件目录
pages 文件夹存放小程序的各个页面
.wxml 类似 web 的 .html
.wxss 类似 web 的 .css

app.js 里面可以控制运行的生命周期
app.json 用作全局的统一配置

project.private.config.json 中可以设置项目名称，直接修改文件内容等等

sitemap 控制百度爬虫的检索机制

p4 view 标签

view 标签相当于 html 中的 div 标签
是 块标签

快捷操作

1
2
3
4
5
6
7
8


view>view
<!-- 敲回车就会自动生成嵌套的 view 标签 -->

.box>.inner>.row
<!-- 敲回车会生成 class 分别为 box、inner 和 row 的嵌套的 view 标签布局结构 -->

.row*8
<!-- 敲回车会生成 8 个相同的 class 为 row 的 view 标签 -->

光标移动到某一行内容，按住 Alt + 上、下键 即可实现移动
Ctrl + 上、下键 实现滚轮滚动

p5 icon、progress 标签

html 中的 span 和 div 的区别之一是：
span 是一个行级标签
div 是一个块级标签

wxml 中的行级标签是 text
其 user-select 属性设置内容是否可以选中复制
space 属性设置空格大小

要显示小于号 < <，需要加上 decode 属性

icon 标签用于设置内置的一些图标，例如 success 等等

进度条标签 progress

p6 rpx

rpx 单位，与 px 的区别是：
当界面放大或者缩小的时候会 响应式地变化

1px = 2rpx
UI 设计稿的大小单位可以使用 rpx

逻辑分辨率
是软件层面定义的分辨率
用于确定用户界面的尺寸和比例
物理分辨率
显示屏拥有的像素数量，固有参数
像素行数乘以列数
若物理分辨率为 1920x1080，意味着它有 1920 个水平像素和 1080 条垂直像素线
dpi
Dots Per Inch
每英寸能够打印或显示的点（像素或墨点）的数量
DPI 值越高，图像的细节就越丰富，打印或显示出来的图像也就越清晰
ppi
Pixels Per Inch
是指每英寸所拥有的像素数量，通常用于描述 显示设备 的分辨率
PPI 值越高，屏幕能够显示的细节就越多，图像也就越清晰

p7 可滚动区域视图组件

scroll-view 标签
设置属性 scroll-x 横向滚动
设置 style 中的 white-space:nowrap;
其中的子标签需要设置 display: inline-block;

p8 自由移动组件

movable-area 标签设置自由移动
一个模块可以在一个区域内自由拖动

p9 子元素从页面脱离

root-portal 标签，用于设置 全局的弹窗或者遮罩层

子元素的 z 轴 index 再高，都无法覆盖住父元素的前面的兄弟标签
故考虑 将需要作为遮罩的元素放在 root-portal 标签内
这样该元素就脱离出该页面
需要到全局 app.wxss 那里设置样式

p10 全局和页面配置

app.json 文件中的 pages 对应着文件目录的 pages 文件夹
直接在 app.json 文件中的 pages 的列表中添加路径
保存后即可自动生成对应的页面，列表中的顺序即展示的顺序

添加编译模式，选择想要的启动页面进行编译

p11 image 标签

一般我们在项目的根目录下创建 static 目录
用于存放静态文件，例如 css、js、html、图片等

image 标签用于插入图片，src 可以使用 相对路径或者引入外部链接
而 / 斜杠开头的是根目录路径

p12 图片的裁剪方式

image 标签设置 mode，实现对 图片的裁剪

mode 的值有 widthfix、heightfix、aspectfix 等等
具体的可以查看微信小程序开发者文档

p13 video 标签

video 标签插入视频
推荐使用云存储服务（uniCloud）或者自己的服务器，然后在 src 引入外部链接
不要放在本地，打包的时候会过大

video 标签常用的属性	用途
autoplay
muted	静音播放
loop	循环播放
object-fix	控制画面拉伸情况
poster	设置封面
style	设置样式

p14 navigator 标签

navigator 标签实现页面跳转，功能类似 a 标签
默认情况下，会记录跳转的页面，便于返回

属性 hover-class="..." 配置展示点击时候的样式

open-type 属性，设置跳转方式

p15 app.js 中的部分内容

文件根目录下的带有 app 字眼的都是公共配置

app.js 中的函数
- onLaunch()
  生命周期函数，页面初始化的时候需要执行的函数（类似于类中的 init 方法）
  只触发一次
  处理登录信息、校验、和服务器的联系
- onShow()
  进入小程序后就会执行
  会 多次触发，当用户 从后台切回小程序 的时候就会执行
  用于缓存信息的读取，监听用户的离开，视频的暂停与播放等等
- globalData
  设置全局变量

p16 其他页面的 js 文件

demo.js
- data
  存放需要在前端页面中响应的数据
- onLoad()
  生命周期函数
  进入到当前页面后，等 页面加载完毕后 再执行的内容

在 onLoad 函数中修改变量：

1
2
3


this.setData({
  变量: "。。。",
});

其他页面的 js 文件调用 app.js 中的内容：

1
2


const app = getApp();
console.log(app.globalData.xxx);

wxml 中引入变量使用 {{}}

Tip
新建一个页面后，去到 添加编译模式 那里选中对应的页面
然后进行编译，之后每次编译后都还是在新建的页面这里
方便调试

es6 箭头函数

1
2
3
4


// 定时器，3 秒后执行操作
setTimeout(() => {
  延时操作;
}, 3000);

p17 if 条件渲染

1
2
3
4
5


<view wx:if="｛｛mydata==1｝｝"> mydata等于1时渲染的内容 </view>

<view wx:elif="｛｛mydata==2｝｝"> mydata等于2时渲染的内容 </view>

<view wx:else> mydata非1非2时渲染的内容 </view>

[!NOTE|style:flat] 注意 wx:if 和 wx:elif、wx:else 所在的标签之间 不能有任何非空的字符

p18 for 循环渲染

循环列表渲染

1
2
3


<view wx:for="｛｛books｝｝" wx:for-item="booksitem" wx:key="index">
  ｛｛index+1｝｝：｛｛booksitem｝｝
</view>

其中 books 变量是一个列表
有时候不指定 key 值会报错，每条数据需要有一个唯一值
所以一般是选择 id 字段作为 key

p19 事件触发

添加事件，例如对用户 触摸、拖拽、长按 等操作进行反馈

点击事件
demo.wxml

1

<view data-arg1="aaa" data-arg2="bbb" bindtap="myClick"> 点我 </view>

demo.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


page(
  ......

  // 定义点击方法
  // 一般在 onLoad 方法的下方定义
  myClick(event){
    console.log(event);

    // 这里传入的参数就是 demo.wxml 的 view 标签中的两个参数
    let {arg1, arg2} = event.currentTarget.dataset;

    console.log(arg1);
  }

  ......
)

p20 事件与数据绑定

css 标准弹性盒模型

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


.box {
  width: 200px;
  height: 200px;
  background: black;
  color: white;

  display: flex;
  justify-content: center;
  align-items: center;
}

生成随机数

1
2
3
4
5
6
7
8
9


// 生成 0~255 之间的小数，之后再取整
let rdm1 = parseInt(Math.random() * 255);
let rdm2 = parseInt(Math.random() * 255);
let rdm3 = parseInt(Math.random() * 255);

let color = `rgb($(rdm1), $(rdm2), $(rdm3))`;
console.log(color);
// 通过美元符号向字符串传入参数
// 注意字符串是通过 `` 包裹，而不是引号 ''

p21 表单组件

按钮

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<button
  size="default"
  设置大小
  type="primary"
  按钮样式
  plain
  是否镂空
  loading="｛｛false｝｝"
  open-type
  disable
  不可用
>
  点点我
</button>

[!NOTE|style:flat] 注意上述 loading 属性值传入的方式

输入

1
2
3
4
5
6
7


<input
    type="text"
    value="张三"
    placeholder="请输入。。。"
    password
>
</input>

p22 input 标签的属性

bindinput 用户在输入时，需要执行的方法
bindfocus 用户触发焦点时，需要执行的方法
bindblur 用户离开焦点时，需要执行的方法

p23 checkbox 及 label 组件

textarea 标签，与 input 标签类似，只是文本可以 多行输入

checkbox 和 radio 标签都是用于选择
前者是多选，后者是单选

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<checkbox-group bindchange="checkChange">
  <view style="padding-bottom: 10px;">
    <label>
      <checkbox value="0"></checkbox>
      <text>点击选中</text>
    </label>
  </view>

  <view>
    <label>
      <checkbox value="1"></checkbox>
      <text>hello</text>
    </label>
  </view>
</checkbox-group>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


page(
    ......

    checkChange(event){
        console.log(event);
        // 可以得到 checkbox 的 value 属性值
    }

    ......
)

css 计算属性
width: calc(100% - 40px)
注意括号中的 减号前后需要有空格

上述计算属性用于有时候 width 设置为 100% 且 padding 属性不为空的情况
例如 padding 属性为 20px
这样该模块的显示就会出现问题，总长度会超出父模块的区域

或者还有一个方法是 box-sizing: border-box; 设置 内填充

p24 model 双向绑定

在 view 标签中设置 model:value="｛｛...｝｝"
然后在对应 js 的 data 中完善好变量的定义

p25 block 标签

bindconfirm="..." 支持键盘 回车触发点击效果

arr.splice(index, 1); 表示从数组下标为 index 开始，删除 1 个元素，并且是直接作用到原数组上

如果需要在 for 循环的标签中添加 if 判断，同时不想破坏布局
可以考虑在其外层添加一层 block 标签，然后在 block 标签添加 if 即可

p26 消息提示框

wx.showToast()
参数：title、icon、duration（提示显示的时长）、mask（添加遮罩层，阻止提示的时候进行其他操作）…

p27 界面交互

wx.showModal()
title 下方包括两个按钮，取消和确定，用户可以进行点击
参数：title、content、cancelColor、success…

wx.showLoading()
放在 onLoad() 函数里面，表示是在 加载的状态 中
参数：title、mask…
可以通过 wx.hideLoading() 进行隐藏

指向问题

1
2
3
4


success (res) {
    console.log(this.data.listArr);
    // 可能报错
}

1
2
3


success: (res) => {
  console.log(this.data.listArr);
};

p28 promise 的用法

https://www.bilibili.com/video/BV1XW4y1v7Md
js 是单线程的程序，一行一行同步执行
但是如果涉及网络请求，则需要考虑网速和服务器的带宽
网速较慢就可能会影响程序的运行
异步就是打破了顺序的关系，理论上效率更高

promise 的作用就是 将异步转为同步

回调地狱
第二行代码可能依赖第一行代码的网络请求结果，而第三行又可能依赖第二行。。。
这样就产生了嵌套，代码可维护性会很差
为了解决这个问题，es6 出现了 promise 语法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// 回调地狱
this.getNav((res) => {
  let id = res.data[0].id;

  this.getList(id, (res) => {
    let id = res.data[0].id;

    this.getComment(id, (res) => {
      console.log(res);
    });
  });
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


// console.dir(Promise);    打印 Promise 的用法

let p = new Promise((resolve, reject)=>{
    ...request({
        url: '',
        success: res=>{
            resolve(res);
        },
        fail: res=>{
            reject(res);
        }
    })
})

// Promise 对象的两个方法 then 和 catch
p.then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


// Promise 的链式调用
// 每一步可以使用前一步的 res
this.getNav()
  .then((res) => {
    let id = res.data[0].id;
    return this.getList(id);
  })
  .then((res) => {
    let id = res.data[0].id;
    return this.getComment(id);
  })
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

// 注意其中的 this.getNav、this.getList、this.getComment 的返回值都是 Promise 对象

而对于 Promise 对象本身，是 异步执行 的

1
2
3
4
5
6
7


// 假设三个 Promise 对象分别为 p1、p2、p3
Promise.all([p1, p2, p3]).then((res) => {
  console.log(res);
});

// 同时处理多个 Promise 对象
// 等待所有 Promise 对象都成功返回结果后，才会进入 then 方法中的回调函数

es7 新规范
await 和 async 一般同时出现
异步处理同步化

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


async onLoad() {
    let id, res;
    res = await this.getNav();
    id = res.data[0].id;

    res = await this.getList(id);
    id = res.data[0].id;

    res = await this.getComment(id);
    console.log(res);
},

[!NOTE|style:flat] ApiPost 可以对 api 发送请求

p29 顶部导航栏 api

wx.setNavigationBarTitle()，放在 onLoad()中
参数：title…

wx.setNavigationBarColor()，放在 onLoad()中
参数：frontColor、backgroundColor…

wx.showNavigationBarLoading()
导航栏左侧有个小 loading 标志
wx.hideNavigationBarLoading()
可以设置 timeout 进行隐藏

wx.hideHomeButton()
隐藏左上角的 home 键

p30 小程序配置

通过全局和页面对应的 .json 文件进行配置
具体的参数信息要查询文档

各个页面的 json 文件的内容优先度比 app.json 更高
即会覆盖过 app.json 中的内容

p31 底部 tabBar 的配置

在 app.json 文件中进行配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


"tabBar": {
    // 文字颜色（包括选中时的颜色）
    "color": "",
    "selectColor": "",
    "backgroundColor": "",

    // list中至少要有两个对象
    "list": [
        {
            "text": "首页",
            "pagePath": "pages/index/index",
            "iconPath": "",
            "selectedIconPath": ""
        },
        {
            "text": "我的",
            "pagePath": "pages/user/user",
            "iconPath": "",
            "selectedIconPath": ""
        }
    ]
}

[!NOTE|style:flat] iconfont 阿里巴巴矢量图标库
一般需要同时下载 icon.png 和 icon-fill.png 两个图标
存放在 static/images/icons 目录下

p32 navigate 路由接口与组件的关系

navigator 标签只能跳转到 非 tabBar 页面，左上角有返回键 <

如果想跳转到 tabBar 页面，则需要使用 open-type 属性
属性值：switchTab（不带参数）和 reLaunch（可以带参数）
跳转后左上角没有返回键

若不使用 navigator 标签，则可以给 view 标签添加 bindtap 属性，绑定一个函数
这个函数调用 wx.reLaunch() 或者 wx.navigateTo 等 api，效果是一样的

p33 wx.request 发送网络请求

[NOTE|style:flat] 测试的时候，需要勾选编辑器右上角的【详情】-【本地设置】-【不校验合法域名。。。】
不过小程序上线之前还是需要进行校验的

ajax 是异步请求

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


data: {
    listArr: []
},

onLoad(options) {
    wx.showLoading({
        title: "加载中...",
        mask: true
    })
    this.getData();
},

getData() {
    wx.request({
        url: 'https://api.thecatapi.com/v1/images/search?limit=1',
        success: res=>{
            console.log(res);
            this.setData({
                listArr: res.data
            });
            wx.stopPullDownRefresh();    //下面的下拉刷新会使用到
        },
        complete: err=>{
            wx.hideLoading();
        }
    })
},

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<view class="box">
  <view
    class="pic"
    wx:for="｛｛listArr｝｝"
    wx:key="id"
  >
    <image src="｛｛item.url｝｝" mode="aspectFill">
  </view>

  <view class="name">
    姓名：｛｛item.id｝｝
  </view>
</view>

注意这个 box，一般在 for 循环展示数据外层套一个 box

p34 下拉刷新页面

在配置文件 json 中添加：

1
2
3


"enablePullDownRefresh": true,
"backgroundColor": "#eee",
"backgroundTextStyle": "light"

然后在对应的 js 文件中找到 enablePullDownRefresh 函数
在函数中进行新的网络请求或者数据处理

注意执行刷新前是否需要清空原来的存储变量

p35 触底加载数据

在配置文件 json 中添加：

1

"onReachBottomDistance": 200

用于控制下拉到距离最后一个元素多少距离的时候进行刷新

在对应的 js 文件中找到 onReachBottom 函数：

1
2
3
4
5


onReachBottom(){
    wx.showNavigationBarLoading();    //对应有wx.hideNavigationBarLoading()

    添加网络请求等操作。。。
}

注意需要进行 数据的拼接，实现持续刷新的效果

1
2
3
4
5


// 数组拼接
let data1 = [1, 2, 3];
let data2 = [4, 5, 6];

let data3 = data1.concat(data2);

p36 关于 wx.request() 的其他参数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


onLoad(){
    this.getData()
}

getData(){
    wx.request({
        url: "http://jsonplaceholder.typicode.com/posts",
        mathod: "POST",
        header: {
            "content-type": "application/json",
            "token": "1111111111111"
        }
        data: {
            name: "Tom",    //将参数传入到url中
            age: 54
        },
        success: res=>{
            console.log(res);
        }
    })
}

p37 网络请求及表单采集

调用 api 接口获取数据
再用 wx:for 将数据完善到表单内

p38 封装的概念

目前每个地方若需要调用 api 接口，都得写 header
里面包括 content-type 等内容
后期要把它们进行封装，避免写重复性的东西
以简化代码

表单新增成功的时候可以添加一个 wx.showToast
弹出提示窗

p39 自定义组件 component

一个个模块合并当作一个组件
当一个组件中的模块需要改动的时候，
只需要改动组件，其余使用该组件的位置就能一并改动

在根目录下新建文件夹 components
在里面创建各个组件的文件夹，例如：MyHeader、Myborder。。。
然后右键可以新建 component，会自动生成四个文件，包括：js、json、wxml、wxss

引入组件
在需要引入的页面的 json 文件中添加对应组件的名字（或者直接在 app.json 中进行全局添加）

1
2
3
4
5
6
7


{
    "usingComponents": {
        "Myhead": "/components/MyHeader/MyHeader"
        ......
    }
    ......
}

之后组件就可以作为一个自定义标签使用

1

<Myhead></Myhead>

p40 自定义组件的传递属性 properties

在组件的 js 文件中，创建属性列表

1
2
3
4
5
6
7
8


Component({
  properties: {
    name: {
      type: String,
      value: "Tom",
    },
  },
});

在组件的 wxml 中，利用双大括号引入 name 值
这时候的 name 值是全局设置的，即引入了该组件的位置的 name 值都是 ‘Tom’

如果我们需要单独修改某个页面的 name 值，只需要：

1

<Myhead name="hello"></Myhead>

p41 注册小程序账号

相较于企业性质的小程序，个人小程序的权限不多，不能使用微信支付、评论模块、物流等等
若需要注册企业性质的小程序，可以通过某宝购入一个营业执照，抖音小店也可以使用

p42 使用 scss 编译 wxss

1
2
3
4
5
6


.out {
}
.out .inner {
}
.out .inner .text {
}

上述情况会出现很多重复的内容：.out .inner 等等
故考虑使用 scss

可以使用 vscode 上的 easy sass 插件
在 vscode 上面下载好后，导入到小程序 ide 中
之后修改 package.json 中的内容

重启项目之后，在对应页面新建 xxx.scss 文件
在 .scss 文件编写保存后，直接会自动编译到 wxss 中

1
2
3
4
5
6


.out {
  .inner {
    .text {
    }
  }
}

通过 scss 也能够更加清晰的看到层级的情况

[!NOTE|style:flat] 目前微信小程序开发工具已经内置支持 sass 编译
直接在 app.json 文件中配置一下即可

p43~ 项目开始

https://www.bilibili.com/video/BV19G4y1K74d?p=43

微信小程序目前已经支持 sass 编译
project.config.json 文件的 setting 对象下添加属性 useCompilerPlugins
这样就能直接编写 scss 文件

app.json 文件中
tabBar->list 中设置底部 tab 页面
usingComponents 设置全局使用的组件
app.wxss 文件中
可以通过设置 page{--somecolor: #xxx} 定义全局的颜色变量
然后 css 中可以进行调用 var(--somecolor);
utils 文件夹
可以存放 数据、时间格式化函数
封装网络 request 函数，返回 Promise 对象
1 2 3 4 5

export function formatTime(args) { ... return ... }
api 文件夹
可以存放封装好的 请求函数，以简化代码

在 css 中，尽量 不使用标签选择器
最好给对应标签另起一个 id 或者 class

注意 onLoad 中的操作是 异步的
1、可以利用 async 和 await 转换成同步的（需要开启强制编译）
2、可以使用 Promise：https://blog.csdn.net/qq_21883423/article/details/104216842

navigator 标签默认是不允许通过 url 跳转到底部 tab 的页面
若需要，则要添加 open-type='reLaunch' 属性

js 中的 data 字段定义的变量，可以在 wxml 中通过 双大括号 进行引用

js 可选链？
e?.detail?.index ?? e 表示：
若 e 对象没有 detail 字段，则直接返回 e；
若有，则再看是否有 index 字段

标签中通过添加属性 bind:tap="函数名" data-id="传递参数"
可以实现 点击跳转操作
在对应组件 component 的 js 文件最后的 methods 中编写点击后执行的函数

小程序打包
【详情】-【本地设置】-【不校验合法域名】需要取消勾选
在微信开发后台管理平台中的【开发管理】-【服务器域名设置】request 合法域名
形如：https://www.baidu.com;https://tea.qingnian8.com;

记录一些 css 的编写

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


border-top: 1px solid var(--somecolor);
border-radius: ;

line-weight: 1.8em;

z-index: ;

position: fix;
right: 50rpx;
bottom: 100rpx;

帧动画：

1

animation: emit 2s infinite;

1
2
3
4
5
6
7
8


@keyframes emit {
  0% {
  }

  100% {
    transform: scale(1.5);
  }
}

内容居中：

1
2
3
4


display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;

点击跳转的实现
可以使用 navigator 标签，或者以下方法：
点击后执行方法中的 wx.navigateTo 进行跳转

1

<view bind:tap="clickfunc"></view>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


Component({
    ...

    methods: {
        clickfunc(e) {
            let something: e.currentTarget.something;
            wx.navigateTo({
                url: 'base_path ?somthing=' + something,
            })
        }
    }

    ...
})

隐藏文字（注意兼容问题）：

1
2
3
4
5
6
7
8


text-overflow: -o-ellipsis-lastline;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;

关于标签的孩子标签：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


.item {
  padding: 0 20rpx;
}

.item:first-child {
  padding-left: 0;
}

.item:last-child {
  padding-right: 0;
}

文字内容样式设置

1
2
3
4
5


.row {
  line-height: 1.6em; /* 行高 */
  text-indent: 2em; /* 首行缩进 */
  font-size: 32rpx;
}

js 文件中导入函数：

1

import { 函数名 } from "../使用相对路径";

内置时间函数：

1
2
3
4
5
6
7
8


let value;
var time = new Date(value);
var year = time.getFullYear();
var month = time.getMonth() + 1;
var date = time.getDate();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();

关于底部的加载和提示：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


Page({
    data: {
        ...
        // 控制下拉刷新动画的显示
        loading: false,
        // 用于判断是否显示 “没有更多内容了”
        havedata: true
    },

    onLoad(options) {
        this.somefunction();
    },

    somefunction() {
        this.setData({
            loading: true,
        });

        获取数据...

        this.setData({
            loading: false,
        });
        if (this.data.arr.length == res.arr.total) {
            this.setData({
                havedata: false,
            });
        }
    }

})

component 组件中，为变量初始化：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


Component({
    ...

    properties: {
        item: {
            type: Object,
            value: {
                'name': 'xxx',
                'title': 'xxx'
            }
        }
    }

    ...
})

关于内容分享功能

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


Page({
    ...

    onShareAppMessage() {
        return {
            title: this.data.???,
            path: 'base_path ?somthing=' + something
        }
    }

    ...
})

通过正则表达式为标签添加 class，从而对富文本的样式进行修改

1

res.data.content = res.data.content.replace(/<p/gi, "<p class='pstyle'");

为全局的 p 标签添加 pstyle 属性

页面下拉刷新和上拉触底事件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


Page({
    ...

    onPullDownRefresh() {
        this.setData({
            变量可能需要重置
        });

        重新获取数据的操作
    },

    onReachBottom() {
        if (达到一定条件，停止刷新) { return; }

        获取新的数据的操作
    },

    ...
})

对 wx.request 进行重新封装：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36


const baseURL = '';

export function request(params) {
    // params可以包括data、url、method等字段

    // 请求头
    let headerObj = {
        'content-type': 'application/json',
    }

    // 返回值为 Promise 对象
    return new Promise((resolve, reject)) => {
        wx.request({
            url: baseURL + params.url,
            method: params.method || 'GET',
            header: headerObj,
            data: params.data || '{}',
            success: res => {
                if(res.data.errorCode != 0) {
                    reject(res);
                    wx.showToast({
                        title: res.data.errMsg,
                        mask: true,
                        icon: 'error'
                    });
                    return;
                }
                resolve(res);    // 这个就是请求成功后返回的值
            },
            fail: err => {
                reject(err);
            }
        })
    }

}