小程序项目开发概览
原创
©著作权归作者所有：来自51CTO博客作者Serena_tz的原创作品，请联系作者获取转载授权，否则将追究法律责任
小程序的四个重要的文件
-
*.js -
*.wxml —> view结构 ----> html -
*.wxss —> view样式 -----> css -
*. json ----> view 数据 -----> json文件
储备知识
- 理解事件机制
- 理解组件化
- 理解数据绑定
- Flex布局
- 移动端适配方案
小程序适配方案
Iphon6： 1rpx = 1物理像素 = 0.5px
微信官方提供的换算方式：
- 以iPhone6的物理像素个数为标准: 750;
- 1rpx = 目标设备宽度 / 750 * px;
- 注意此时底层已经做了viewport适配的处理，即实现了理想视 口
数据绑定 & 事件
初始化数据： 当前页面的js文件
Page({
/**
* 页面的初始数据
*/
data: {
msg: '开启小程序之旅'
},
})修改数据
this.setData({
msg: '我是修改之后的数据'
})声明周期钩子函数
Page({
/**
* 页面的初始数据
*/
data: {
msg: '开启小程序之旅'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})获取登录用户的数据
文档查看位置
官方文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html API—> 开放接口
代码示例
// 获取登录用户的数据
wx.getUserInfo({
//withCredentials: true,
success: (res) => {
console.log(res);
let user = res.userInfo;
this.setData({
user
})
}
})
自定义事件
冒泡事件
- 定义：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
- 冒泡事件列表：
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
非冒泡事件
- 定义：当一个组件上的事件被触发后，该事件不会向父节点传递。
- 非冒泡事件：表单事件和自定义事件通常是非冒泡事件
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
绑定事件
bind绑定
事件绑定不会阻止冒泡事件向上冒泡
<view bindtap="handleTap" class='start_container' bindtap="handleTap">
<text class='start'>开启小程序之旅</text>
</view>
catch 绑定
事件绑定可以阻止冒泡事件向上冒泡
<view catchtap="handleTap" class='start_container' bindtap="handleTap">
<text class='start'>开启小程序之旅</text>
</view>
跳转页面
wx.navigateTo(OBJECT)
跳转有记录，可通过回退键进行回退
// 跳转到list页面
wx.navigateTo({
url: '/pages/list/list',
success(){
console.log('跳转成功');
}
})
wx.redirectTo(OBJECT)
没有记录，不能进行回退
// 跳转到list页面
wx.redirectTo({
url: '/pages/list/list',
success(){
console.log('跳转成功');
}
})
组件 & 模板使用
组件
<view>
<swiper indicator-dots='true' indicator-color='deepPink'>
<swiper-item>
<image src='/images/detail/carousel/iqiyi.png'></image>
</swiper-item>
<swiper-item>
<image src='/images/detail/carousel/vr.png'></image>
</swiper-item >
<swiper-item>
<image src='/images/detail/carousel/wx.png'></image>
</swiper-item >
</swiper>
</view>
模板
定义模板： name=‘模板名字’
<template name='listTemplate'>
<view>
<text>tempalte content</text>
</view>
</template>
使用模板
<import src="./detail_template/detail_item_template.wxml" />
使用模板样式
@import '../templates/list-template.wxss';
数据存储
存数据：setStorage， 同步： setStorageSync
// 数据存储
wx.setStorage({
key: 'isCollected',
data: oldCollectFlag
})
获取数据：getStorage 同步: getStorageSync
let oldCollectFlag = wx.getStorageSync('isCollected');数据交互
发送请求
wx.request({ // 发送请求
url: API_URL, // 请求的url
header: { // 设置请求头
'Content-type': 'json',
},
success: (res) => { // 请求成功的回调函数
// 隐藏提示加载信息
wx.hideToast();
console.log(res); // 请求的成功的数据对象，注意是封装后的对象
this.setData({movies: res.data.subjects})
}
})小程序设置
- 小程序出于安全考虑所有的协议都是https协议，且如果没有在开发设置中配置请求的连接是无法访问指定的链接的。
- 一个微信小程序的并发网络请求数量被限制在最多5个
不同页面之间通信
1）a页面
let appData = getApp(); // 获取app中的数据对象
onLoad (options) {
// 加载到数据之前给用户显示‘正在加载的提示信息’
wx.showToast({
title: "加载中...",
icon: "loading",
duration: 3000
});
wx.request({
url: API_URL,
header: {
'Content-type': 'json',
},
success: (res) => {
// 隐藏提示加载信息
wx.hideToast();
console.log(res);
this.setData({movies: res.data.subjects})
appData.appData.movies = res.data.subjects; // 将数据更新至公共的app数据对象中
}
})
},
2）b页面
let appData = getApp();
onLoad: function (options) {
console.log(options.id);
console.log(appData.appData.movies);
this.setData({movie: appData.appData.movies[options.id]})
},
app应用存储公共数据
存取数据
App({
data: {
isPlay: false,
playPageIndex: null,
movies: {}
}
})读取数据
let app = getApp();
app.data.isPlay = false;
备注：app方法配置对象中的属性和方法均为app应用实例的属性和方法
