小程序的特点
小程序在目前越来越流行,离不开小程序的特点:
对于用户来说:
①无需安装,即搜即用;
②优秀的用户体验,和APP体验相同;
③依靠微信,使用方便
对于开发者来说:
①开发成本低,不用太过考虑手机兼容性的问题;
②接口多,微信提供了很多接口,可以直接使用;
小程序与H5的区别
小程序是依赖于APP的,无法脱离APP而单独存在;
H5是网页应用在PC浏览器或移动端的形式。
二者之间的区别:
①开发成本不同:以微信小程序来说,微信提供了开发的组件和封装好的API,不用考虑兼容的问题,成本低。H5需要考虑IDE、框架、技术的选型,还会有兼容性的问题,成本高。
②加载速度:小程序的加载速度相对于H5来说,速度快。
③运行环境:小程序依附于APP,H5依附于浏览器。
④系统权限:小程序相较于H5,可以获得更多的系统权限,如:网络通信、系统缓存等。
⑤用户体验:小程序的体验度更加好一些,运行更加流畅。
小程序的三方框架
框架 | 相似框架 |
---|---|
腾讯 wepy | 类似于vue |
美团 mpvue | 类似于vue |
京东 taro | 类似于vue |
滴滴 chameleon | |
uni-app | 类似于vue |
原生框架 MINA |
小程序的入门
就个人感受来说:小程序和Vue的语法很像,同时基础还是HTML+CSS+JS。所以在学习小程序之前,学习过前端基础知识和Vue,小程序的学习就很容易了。
IDE
微信开发者工具(下载链接)+ vscode
如何开始一个微信小程序+小程序的基础语法
这一点微信官网已经阐述的很详细了,大家可以移步官网:https://developers.weixin.qq.com/miniprogram/dev/framework/
新建项目
目录结构
上手开发项目
小程序中调取后端接口的方法
1.发送异步请求获取轮播图数据
wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
success: (result) => {
this.setData({
swiperList: result.data.message
})
}
})
2.Promise优化,解决回调地狱的问题
①封装JS文件
export const request = (params) => {
return new Promise((resolve, reject) => {
// 定义公共的url
const baseUrl = 'https://api-hmugo-web.itheima.net/api/public/v1'
wx.request({
...params,
url: baseUrl + params.url,
success: (result) => {
resolve(result.data.message);
},
fail: (err) => {
reject(err);
}
});
})
}
②页面引用文件,发送请求
// 引入 用来发送请求 的方法 一定要把路径写全
import { request } from "../../request/index.js"
request({ url: "/home/swiperdata" })
.then(result => {
this.setData({
swiperList: result.data.message
})
})
3.async,await简化写法
// get请求方式
let result = await request({ url: "/home/swiperdata" })
// post请求方式
let result = await request({ url: "/my/orders/create", method: "POST", data: orderParams, header })
路由传参
1.通过navigator跳转的时候携带参数
<navigator url="../goods_list/index?cid={{item2.cat_id}}"></navigator>
2.在跳转到的页面通过onLoad事件获取
onLoad: function (options) {
console.log(options.cid)
}
3.通过onShow事件也可以获取
onShow() {
// 1.获取当前小程序的页面栈(是一个数组 长度最大是10,即在小程序中,在内存中最多只保留10个页面)
let pages = getCurrentPages();
// 2.数组中 索引最大的页面就是当前页面
let currentPage = pages[pages.length-1];
console.log(currentPage.options);
// 3.获取URL地址上的type参数
const {type} = currentPage.options;
}
子父组件传值
1.父→子
①定义子组件Tabs
②父组件引用子组件并传值
在父组件的.json
文件中,添加引用的代码:
"usingComponents": {
"Tabs": "../../components/Tabs/Tabs"
}
.wxml
页面中,引用子组件并传值:
<Tabs tabs="{{tabs}}"></Tabs>
③子组件接收参数,当做自己的参数使用即可:
子组件的.js
文件中接收参数:
properties: {
tabs: {
type: Array,
value: []
}
}
2.子→父
①子组件中绑定事件
<view bindtap="handleItemTap" data-index="{{index}}"></view>
.js
文件中定义事件:
handleItemTap(e) {
// 获取点击的索引
const {index} = e.currentTarget.dataset
// 索引传给父组件
this.triggerEvent("handleTabsItemChange", {index})
}
②父组件接收事件:
<Tabs tabs="{{tabs}}" bindhandleTabsItemChange="handleTabsItemChange"></Tabs>
.js
文件中定义事件:
handleTabsItemChange(e) {
const {index} = e.detail;
}
上拉加载和下滑刷新
可参考博客:https://blog.csdn.net/m0_37508531/article/details/107665401