微信小程序（原生）开发入门学习笔记

我是亮哥啊

已于 2024-04-11 14:07:01 修改

阅读量2.2k

点赞数 41

文章标签：微信小程序学习笔记小程序前端前端框架

于 2024-04-07 19:15:29 首次发布

本文链接：https://blog.csdn.net/gl199555/article/details/137232142

版权

一、开发前准备

1、注册开发者账号并拿取AppID

Appid：开发 / 开发管理 / 开发者ID

2、下载微信开发者工具

下载地址：微信开发者工具下载地址与更新日志 | 微信开放文档

3、创建第一个微信小程序项目

启动微信开发者工具：

4、项目目录文件简介

│  .eslintrc.js
│  app.js // 项目入口文件
│  app.json // 小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
│  app.wxss // 小程序公共样式表
│  project.config.json // 项目配置文件，如AppID等
│  project.private.config.json
│  sitemap.json // 微信索引文件
│      
├─pages // 页面文件夹
│  ├─index // 首页
│  │      index.js // 书写页面逻辑
│  │      index.json // 页面配置
│  │      index.wxml // 书写页面标签结构
│  │      index.wxss // 书写页面样式
│  │      
│  └─logs // 日志页面
│          logs.js
│          logs.json
│          logs.wxml
│          logs.wxss
│          
└─utils // 第三方工具（可删除）

5、配置服务器域名（可选）

场景：如果Ajax请求链接的服务器非微信云服务器，需配置服务器域名。

配置方法：开发 / 开发管理 / 服务器域名

二、小程序配置

2.1 全局配置

根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

全局配置详见：全局配置 | 微信开放文档

常用配置：

{
    // ⽤于描述当前⼩程序所有⻚⾯路径
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
    // 定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    // tab 的列表，最少 2 个、最多 5 个 tab
    "list": [{
    // 页面路径
      "pagePath": "pages/index/index",
    // tab 上按钮文字
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
    // 网络超时
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

tabBar的相关配置：

2.2 页面配置

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。详见：页面配置 | 微信开放文档

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜⾊，如 #000000
navigationBarTextStyle	String	white	导航栏标题颜⾊，仅⽀持 black /white
navigationBarTitleText	String		导航栏标题⽂字内容
backgroundColor	HexColor	#ffffff	窗⼝的背景⾊
backgroundTextStyle	String	dark	下拉loading的样式，仅⽀持black /white
enablePullDownRefresh	Boolean	false	是否开启当前页面下拉刷新 ,详⻅ Page(Object object) \| 微信开放文档
onReachBottomDistance	Number	50	⻚⾯上拉触底事件触发时距⻚⾯底部距离，单位为px。详⻅ Page(Object object) \| 微信开放文档
disableScroll	Boolean	false	设置为 true 则⻚⾯整体不能上下滚动；只在⻚⾯配置中有效，⽆法在 app.json 中设置该项

2.3 构建npm

① 首先执行 npm init -y 得到 package.json 文件

② 执行 npm i 获得node_modules文件夹

③ 点击工具 → 构建npm得到 miniprogram_npm文件夹

三、小程序的生命周期

3.1 应用生命周期

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。其他页面通过getApp()来获取数据。详见：App(Object object) | 微信开放文档

属性	说明	API
onLaunch	小程序初始化完成时触发，全局只触发一次。	wx.getLaunchOptionsSync
onShow	监听⼩程序启动或切前台。	wx.onAppShow
onHide	监听⼩程序切后台。	wx.onAppHide
onError	错误监听函数。	wx.onError
onPageNotFound	⻚⾯不存在监听函数。	wx.onPageNotFound

// app.js
App({
  onLaunch (options) {
    // 初始化完成时触发，全局只触发一次
  },
  onShow (options) {
    // 当小程序启动，或从后台进入前台显示，会触发 onShow
  },
  onHide () {
    // 小程序从前台进入后台，触发 onHide
  },
  onError (msg) {
    // 当小程序发生脚本错误，或者 API 调用失败时，会触发 onError 并带上错误信息
    console.log(msg)
  },
    // 全局数据
  globalData: {}
})

3.2 页面生命周期

详见：Page(Object object) | 微信开放文档

注意：小程序的数据绑定放在data对象中，函数声明放在 Page({})中

// pages/xxx/xxx.js
Page({

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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

四、WXML语法

语法详见：WXML | 微信开放文档

4.1 数据绑定

详见：数据绑定 | 微信开放文档

语法：{{value}}

注意点：花括号和引号之间如果有空格，将最终被解析成为字符串

4.2 列表渲染

详见：列表渲染 | 微信开放文档

语法：wx:for="{{Array}}" wx:key="unique"

<block wx:for="{{[1, 2, 3]}}" wx:key="index">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

注意点：默认数组的当前项的下标变量index，数组当前项的变量名默认为item,支持自定义。

4.3 条件渲染

详见：条件渲染 | 微信开放文档

语法：wx:if="{{Boolean}}"

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

公共属性hidden

<view hidden="{{true}}"> True </view>

注意点：频繁切换⽤ hidden，不常使⽤⽤ wx:if

五、事件绑定

详见：事件 | 微信开放文档

语法：bindEvent="callBack"

常用的一些事件绑定：

5.1 点击事件

语法：bindtap="callBack"

事件传值通过标签⾃定义属性的⽅式

xxx.wxml

<button bindtap="handleTap" data-item="100">Click me!</button>

xxx.js

Page({
  handleTap: function(event) {
    // {item:100}
    console.log(e.currentTarget.dataset)
  }
})

5.2 输入事件

语法：bindinput="callBack"

xxx.wxml

<input
bindinput="handleInput"
placeholder="请输入名称"
value="{{value}}"
type="text"
/>

xxx.js

Page({
    data: {
        value: 0
      },

    handleInput: function(e) {
    // 输入框的值
    console.log(e.detail.value);
     }
})

六、页面跳转

6.1 使用navigator组件跳转

详见：navigator | 微信开放文档

常用属性：

open-type有效值：

传参可在url使用?拼接，多个参数使用&拼接，使用onLoad页面生命周期拿去参数

xxx.wxml

<!-- 跳转并传参 -->
<navigator 
open-type="navigate" 
url="{{'/pages/goods_detail/goods_detail?id=1}}"
/>

xxx.js

// 取出参数
onLoad(options) {
    console.log(options.id) // 1
  }

6.2 使用路由跳转

详见： wx.navigateTo(Object object) | 微信开放文档

页面路由 | 微信开放文档

使用方式：在js中直接调用，传参与拿取参数与navigator组件一致。

// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.switchTab({ url: '/index' })

// 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.redirectTo({ url: 'test?id=1' })

// 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
// 使用 wx.navigateBack 可以返回到原页面。
wx.navigateTo({ url: 'test?id=1' })

// 关闭当前页面，返回上一页面或多级页面。
wx.navigateBack()

// 关闭所有页面，打开到应用内的某个页面
// 使用场景：当用户点击首页按钮时，关闭所有页面，返回首页。
wx.reLaunch({ url: 'test?id=1' })

Tip：小程序中页面栈最多十层。

七、数据管理

7.1 页面data中的数据

data简介：页面加载时，data将会以JSON字符串的形式由逻辑层传至渲染层，渲染层可以通过wxml对数据进行绑定。

修改data中的数据使用：this.setData(Object data, Function callback)

否则不会引起视图的更新。

详见：Page(Object object) | 微信开放文档

Page({
  data: {
    name: '张三',
  },
  handleTap() {
    this.setData({ name:'法外狂徒' })
  },
})

7.2 数据缓存

详见：wx.setStorageSync(string key, any data) | 微信开放文档

本地缓存：将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。

// 存储数据
wx.setStorageSync(string key, any data)

// 取出数据
wx.getStorageSync(string key)

//清理本地缓存
wx.clearStorage()

八、WXSS语法

简介：样式语言，具有css大部分的特性，wxss 在 css 基础上做了一些扩充和修改。

① 尺寸单位rpx：

新增尺寸单位rpx，可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

② 样式导入：

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

@import "common.wxss";

九、常用API

API	功能	文档位置
wx.request()	发起 HTTPS 网络请求	RequestTask \| 微信开放文档
wx.showToast()	显示消息提示框	wx.showToast(Object object) \| 微信开放文档
wx.hideToast()	隐藏消息提示框	wx.hideToast(Object object) \| 微信开放文档
wx.showLoading()	显示 loading 提示框	wx.showLoading(Object object) \| 微信开放文档
wx.getSystemInfo()	获取系统信息	wx.getSystemInfo(Object object) \| 微信开放文档
wx.vibrateShort()	使手机发生较短时间的振动	wx.vibrateShort(Object object) \| 微信开放文档
wx.chooseMedia()	拍摄或从相册中选择图片或视频	wx.chooseMedia(Object object) \| 微信开放文档
wx.previewImage()	在新页面中全屏预览图片	wx.previewImage(Object object) \| 微信开放文档
wx.login()	调用接口获取登录凭证	wx.login(Object object) \| 微信开放文档
wx.requestPayment()	发起微信支付	wx.requestPayment(Object object) \| 微信开放文档
wx.chooseAddress()	获取用户收货地址	wx.chooseAddress(Object object) \| 微信开放文档

十、组件

详见：视图容器 | 微信开放文档

常用组件：

view 视图容器
text 文本
image 图片
input 输入框
button 按钮
textarea 长文本输入框
swiper 滑块视图容器
scroll-view 可滚动视图区域
rich-text 富文本
......

十一、其他

11.1 wx.request二次封装

export const request = (params) => {
  // 判断 url中是否带有 /my/ 请求的是私有的路径 带上header token
  let header = { ...params.header };
  if (params.url.includes("/my/")) {
    // 拼接header 带上token
    header["Authorization"] = wx.getStorageSync("token");
  }

  // 定义公共的url
  const baseUrl = "https://xxxx";
  return new Promise((resolve, reject) => {
    wx.request({
      ...params,
      header: header,
      url: baseUrl + params.url,
      success: (result) => resolve(result.data),
      fail: (err) => reject(err),
      complete: () => {}
    });
  });
};