上手微信小程序开发
小程序16 分钟 读完 (大约 2448 个字)

上手微信小程序开发

小程序的css和js和其他前端项目一样，只是HTML换成了WXML标签，故而小程序的本质就是网页。

小程序和网页的区别是：小程序使用的是小程序内提供的API故而小程序不支持浏览器。

入门

优势

基于微信，故而可以调用微信的API比如拍照、支付、登录注册等，无需考虑平台差异因为微信小程序基于微信平台。

前置知识

  1. js
  2. css

开发准备

  1. 到微信公众平台注册申请一个appid，得到一个appid和appsecret。
  2. 下载微信提供的小程序开发工具，用于运行和调试。

上手

这里不使用微信新建小程序的功能，手动从头到尾写一下小程序的结构。

  1. 新建项目目录比如hello
  2. 新建app.js文件
app.js
1
2
// 新建一个小程序实例，可以传入一个配置对象
App();
  1. 新建配置文件app.json，记录了一些配置。
app.json
1
2
3
4
5
6
{
    // pages属性表明小程序包含哪些页面，值是一个数组，数组的每一项就是一个页面
   "pages": [
    "pages/home/home"
   ]
}

其中 "pages/home/home" 中的pages存放所有的页面，每一个页面都有自己的目录，这里的页面的目录名是第一个home，小程序会加载页面目录下的home.js文件（扩展名可以省略），故而这个目录表示小程序加载pages目录下的home页面下的home.js文件，home.js文件名可以随便起名。

  1. 新建home页面目录和下面的home.js文件
1
2
mkdir -p pages/home
touch pages/home/home.js
home.js
1
2
// Page()方法由小程序提供用于初始化一个页面实例，参数是一个配置对象
Page({});
  1. 在pages/home下新建一个home.wxml文件，wxml是类似于html的微信页面标记语言。
1
hello world
  1. 打开微信小程序开发工具，导入hello项目。

WXML语言

wxml文件类似于html文件，也是在里面写各种标记语言。

不过使用的是微信小程序提供的wxml的标签。

常用标签：

  • view：表示一个区块，用于区别其他区块，类似于div
  • text：表示一段inline文本，类似span

项目结构

|- app.json
|- app.js
|- pages
|- home
    |- home.wxml
    |- home.js

所有的小程序都是类似上面的结构。

项目配置文件

app.json是小程序项目的全局配置文件。

app.json中还有window属性，用于设置小程序的窗口。

app.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "pages": [
    "pages/home/home"
  ], 
  "window": {
    // window是一个对象

    // 导航栏颜色
    "navigationBarBackgroundColor": "#ff0000",
    // 导航栏文本颜色，black或者white（默认）
    "navigationBarTextStyle": "white",
    // 导航栏标题
    "navigationBarTitleText": "小程序 Demo"     
  }
}

除此之外，app.json还可以配置各种组件，比如选项卡。

样式

全局样式

小程序允许在项目根目录防止一个app.wxss文件，他是一个全局样式文件，里面写css。

app.wxss
1
2
3
4
5
6
7
8
9
/* 页面选择器 */
page {
    /* style */
}

/* text选择器 */
text {
    /* style */
}

flex布局

官方推荐使用flex布局。

如果要书写局部样式，比如要对pages/home这个页面写一个专门的样式文件，则需要在该目录下新建home.wxss文件，该文件的样式只对于home页面生效。

home页面的flex布局：

home.wxss
1
2
3
4
5
6
7
8
9
10
11
page {
  /* 将页面高度设置为屏幕的高度 */
  height: 100%;
  /* 将页面的宽度设置为屏幕的宽度，小程序的总宽度为750rpx */
  width: 750rpx;
  display: flex;
  /* 页面一级子元素采用水平居中 */
  justify-content: center;
  /* 页面一级子元素垂直居中 */
  align-items: center;
}

weui

腾讯提供了一套ui框架叫weui。

weui demo：weui.io

weui的小程序版本是weui-wxss。

使用weui-wxss：

  1. 将weui.wxss文件复制到app.wxss头部。
  2. 给wxml文件加上weui-wxss的class，类似bootstrap。
home.wxml
1
2
3
4
5
6
7
8
9
10
11
<view>
  <button class="weui-btn weui-btn_primary">
    主操作
  </button>
  <button class="weui-btn weui-btn_primary weui-btn_loading">
    <i class="weui-loading"></i>正在加载
  </button>
  <button class="weui-btn weui-btn_primary weui-btn_disabled">
    禁止点击
  </button>
</view>

用到什么class就查文档。

轮播图

home.wxml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<view>
  <!-- swiper是轮播图组件 -->
  <swiper
    indicator-dots="{{true}}"  
    autoplay="{{true}}"
    style="width: 750rpx;">
    <!-- 图片一 -->
    <swiper-item>
      <image src="https://picsum.photos/200"></image>
    </swiper-item>
    <!-- 图片二 -->
    <swiper-item>
      <image src="https://picsum.photos/250"></image>
    </swiper-item>
    <!-- 图片三 -->
    <swiper-item>
      <image src="https://picsum.photos/300"></image>
    </swiper-item>
  </swiper>
</view>

加入脚本

数据绑定

就是脚本里面的某些数据，可以自动成为页面的全局变量，两者绑定，也就是MVVM。

home.js
1
2
3
4
5
Page({
  data: {
    name: '张三'
  }
});

home页面可以自动读取上面的data。

绑定到页面中：

1
2
3
<view>
  <text class="title">hello {{name}}</text>
</view>

如果需要在js中读取data中的变量则需要这样写：this.data.name

全局变量

数据绑定只对于当前页面有效，如果需要页面之间共享数据则需要写入全局配置中。

app.js
1
2
3
4
5
6
App({
//   全局data
  globalData: {
    now: (new Date()).toLocaleString()
  }
});

现在全局变量配置好了，在页面中获取变量：

home.js
1
2
3
4
5
6
7
8
// getApp方法用于获取app实例
const app = getApp();

Page({
  data: {
    now: app.globalData.now
  }
});

事件

小程序常用事件：

  • tap：触摸后离开
  • longpress：长按，超过350ms触发
  • touchstart：触摸开始
  • touchmove：触摸后移动
  • touchcancel：触摸后被打断
  • touchend：触摸结束

事件的传播分两个阶段：捕获（从外层元素到内层元素捕获），然后是冒泡（从内层元素到外层元素传播），故而一个事件在同一个元素会触发两次。

小程序允许指定元素的触发阶段，方法是为事件属性名加上下面的前缀：

  • capture-bind：捕获阶段触发。
  • capture-catch：捕获阶段触发，并中断事件，不再向下传播，即中断捕获阶段，并取消随后的冒泡阶段。
  • bind：冒泡阶段触发。
  • catch：冒泡阶段触发，并取消事件进一步向上冒泡。
home.wxml
1
2
3
4
5
<view>
  <text class="title">hello {{name}}</text>
  <!-- 这里为button添加了一个bind属性，在tap事件后的冒泡阶段触发buttonHandler -->
  <button bind:tap="buttonHandler">点击</button>
</view>
home.js
1
2
3
4
5
6
7
8
9
10
11
12
13
Page({
  data: {
    name: '张三'
  },
//   event是事件对象
  buttonHandler(event) {
    // this指向页面实例
    // 不能直接修改data，需要通过setData修改data，然后触发绑定机制导致页面上的全局变量发生变化
    this.setData({
      name: '李四'
    });
  }
});

动态提示Toast

小程序使用Toast给用户提示。

home.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Page({
  data: {
    name: '张三'
  },
  buttonHandler(event) {
    // setData的第二个参数是回调函数
    this.setData({
      name: '李四'
    }, function () {
      // 调用Toast，传入一个配置对象
      // wx对象是微信小程序提供的原生对象，所有的API都定义在这个对象上面
      wx.showToast({
        title: '操作完成',
        duration: 700
      });
    }),
  }
});

对话框Modal

使用wx.showModal()可以新建一个对话框。

home.js
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
Page({
  data: {
    name: '张三'
  },
  buttonHandler(event) {
    // 获取页面实例that
    const that = this;
    // 对于showModal方法传入一个配置对象
    wx.showModal({
      title: '操作确认',
      content: '你确认要修改吗？',
    //   成功后的回调方法
      success (res) {   
        // 使用res.confirm判断用户点击的是确定还是取消
        if (res.confirm) {
          that.setData({
            name: '李四'
          }, function () {
             wx.showToast({
               title: '操作完成',
               duration: 700
             });
          });
        } else if (res.cancel) {
          console.log('用户点击取消');
        }
      },
    //   失败后的回调
      fail(res) {
        // 失败处理
      }
    });
  }
});

API

WXML渲染语法

1
2
3
4
5
Page({
  data: {
    items: ['事项 A', '事项 B', '事项 C']
  }
});

wxml中遍历items：

1
2
3
4
5
<view>
  <text class="title" wx:for="{{items}}">
    {{index}}、 {{item}}
   </text>
</view>

客户端数据存储

小程序允许将一部分数据保存在客户端（微信）中，方便读取。

本地存储（同步）：wx.setStorageSync(key, value)
本地读取（同步）：wx.getStorageSync(key)

客户端存储主要用于缓存不重要的数据。

远程数据请求

发布出去的小程序所请求的服务器域名都是要事先登记的，但是开发阶段没有限制（需要在本地设置里面勾选）。

请求：wx.request({})，参数是一个配置对象。

open-data组件

<open-data></open-data>组件可以在页面上显式用户的身份信息。

1
2
3
4
5
<view>
  <!-- type属性指定要显示的用户信息类型 -->
  <open-data type="userAvatarUrl"></open-data>
  <open-data type="userNickName"></open-data>
</view>

其他信息类型：

  • userNickName：用户昵称
  • userAvatarUrl：用户头像
  • userGender：用户性别
  • userCity：用户所在城市
  • userProvince：用户所在省份
  • userCountry：用户所在国家
  • userLanguage：用户的语言

获取用户个人信息

获取用户个人信息需要得到授权，可以通过按钮获取用户授权。

wxml代码：

1
2
3
4
5
6
<view>
  <text class="title">hello {{name}}</text>
  <button open-type="getUserInfo" bind:getuserinfo="buttonHandler">
    授权获取用户个人信息
  </button>
</view>

js代码：获取用户信息

1
2
3
4
5
6
7
8
9
10
Page({
  data: { name: '' },
  buttonHandler(event) {
    // 实际开发中使用wx.getSetting()判断一下是否已经得到用户授权
    if (!event.detail.userInfo) return;
    this.setData({
      name: event.detail.userInfo.nickName
    });
  }
});

页面跳转

页面跳转的wxml方法：

小程序每个页面的路径都要放在配置文件app.json中的pages属性中。

pages数组第一个页面是小程序打开时默认展示的页面。

小程序页面之间通过navigator标签，url属性实现跳转。

页面跳转的js方法：

使用wx.navigateTo()方法，传入一个配置对象。

参考

  1. 微信小程序开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
  2. 微信小程序开发指南：https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a
  3. https://www.ruanyifeng.com/blog/2020/10/wechat-miniprogram-tutorial-part-one.html
  4. https://www.ruanyifeng.com/blog/2020/10/wechat-miniprogram-tutorial-part-two.html
  5. https://www.ruanyifeng.com/blog/2020/10/wechat-miniprogram-tutorial-part-three.html
  6. https://www.ruanyifeng.com/blog/2020/11/wechat-miniprogram-tutorial-part-four.html
  7. 小程序面试题：https://vue3js.cn/interview/applet/applet.html

喜欢这篇文章？打赏一下作者吧

评论

关注我

链接

分类

最新文章

归档

标签

二分查找1
二叉树1
二维数组1
动态规划2
双指针1
字符串1
排序1
数学1
数组3
树1
递归2
链表2

订阅更新

×