【前端每日基础】day27——小程序开发

小程序开发详细介绍

1. 基本概念

   小程序：小程序是一种无需下载安装即可使用的应用。用户通过微信搜索或扫描二维码即可打开小程序。小程序具有触手可及、用完即走、体验良好的特点。

   组成部分：

   WXML：用于描述页面的结构。

   WXSS：用于描述页面的样式。

   JavaScript：用于实现页面的逻辑。

   JSON：用于对小程序进行全局配置，以及对页面进行配置。

2. 开发工具

   微信开发者工具：这是微信官方提供的一款集成开发环境，支持代码编辑、调试、预览和发布。

   Visual Studio Code：常用的代码编辑器，配合微信开发者工具一起使用，可以提高开发效率。

   微信公众平台：在微信公众平台上注册并创建小程序，获取 AppID。

3. 小程序生命周期

   每个小程序页面都有自己的生命周期函数，用于处理页面加载、显示、隐藏和卸载等事件。

App生命周期函数：

onLaunch：小程序初始化完成时触发，全局只触发一次。

onShow：小程序启动或从后台进入前台显示时触发。

onHide：小程序从前台进入后台时触发。

Page生命周期函数：

onLoad：页面加载时触发。

onShow：页面显示时触发。

onReady：页面初次渲染完成时触发。

onHide：页面隐藏时触发。

onUnload：页面卸载时触发。

4. 组件和API

组件：小程序提供了丰富的基础组件，用于构建用户界面。

视图容器：、、。

基础内容： 、、。

表单组件：、、、、。

导航组件：、。

媒体组件： 、、、。

API：小程序提供了大量的API，用于调用微信的能力和操作小程序的各种功能。

界面API：wx.showToast、wx.showLoading、wx.navigateTo。

网络API：wx.request、wx.uploadFile、wx.downloadFile。

数据缓存API：wx.setStorage、wx.getStorage、wx.clearStorage。

媒体API：wx.chooseImage、wx.previewImage、wx.saveImageToPhotosAlbum。

设备API：wx.getSystemInfo、wx.getNetworkType、wx.scanCode。

5. 常见问题和解决方案

页面跳转与传参

使用 wx.navigateTo 进行页面跳转，并在 URL 中传递参数。

javascript

复制代码

wx.navigateTo({

url: ‘/pages/detail/detail?id=123&name=test’

});

在目标页面的 onLoad 方法中获取参数。

javascript

复制代码

onLoad: function(options) {

console.log(options.id); // 输出：123

console.log(options.name); // 输出：test

}

网络请求

使用 wx.request 发起网络请求。

wx.request({  url: 'https://example.com/api/data',  method: 'GET',  success: function(res) {    console.log(res.data);  },  fail: function(err) {    console.error(err);  }});

用户授权与登录

使用 wx.login 获取登录凭证，配合后台完成用户登录。

wx.login({  success: res => {    if (res.code) {      // 将登录凭证发送到后台换取 openid, sessionKey, unionid      wx.request({        url: 'https://example.com/login',        method: 'POST',        data: {          code: res.code        },        success: function(response) {          console.log('登录成功:', response.data);        }      });    } else {      console.error('登录失败！' + res.errMsg);    }  }});

数据缓存

使用 wx.setStorage 和 wx.getStorage 对数据进行本地存储和读取。

// 存储数据wx.setStorage({  key: 'userInfo',  data: { name: 'John', age: 30 }});// 读取数据wx.getStorage({  key: 'userInfo',  success: function(res) {    console.log(res.data); // 输出：{ name: 'John', age: 30 }  }});

条件渲染

使用 wx:if 和 wx:else 进行条件渲染。