【前端每日基础】day27——小程序开发
小程序开发详细介绍
- 基本概念
小程序：小程序是一种无需下载安装即可使用的应用。用户通过微信搜索或扫描二维码即可打开小程序。小程序具有触手可及、用完即走、体验良好的特点。
组成部分：
WXML：用于描述页面的结构。
WXSS：用于描述页面的样式。
JavaScript：用于实现页面的逻辑。
JSON：用于对小程序进行全局配置，以及对页面进行配置。 - 开发工具
微信开发者工具：这是微信官方提供的一款集成开发环境，支持代码编辑、调试、预览和发布。
Visual Studio Code：常用的代码编辑器，配合微信开发者工具一起使用，可以提高开发效率。
微信公众平台：在微信公众平台上注册并创建小程序，获取 AppID。 - 小程序生命周期
每个小程序页面都有自己的生命周期函数，用于处理页面加载、显示、隐藏和卸载等事件。
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, unionidwx.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 进行条件渲染。
<view wx:if="{{isLoggedIn}}"><text>欢迎回来，用户！</text>
</view>
<view wx:else><button bindtap="login">登录</button>
</view>
列表渲染
使用 wx:for 进行列表渲染。
<view wx:for="{{items}}" wx:key="id"><text>{{item.name}}</text>
</view>
Page({data: {items: [{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' },{ id: 3, name: 'Item 3' }]}
});
总结
小程序开发虽然相对简单，但需要熟练掌握其生命周期、组件、API的使用。结合实际项目中的问题与解决方案，熟悉常见的开发模式与技巧，可以帮助你在面试中展示出扎实的开发能力和解决问题的能力。希望这些内容对你的面试有所帮助，祝你成功！