小程序入门到上手开发项目，这些知识点应该知道（附项目的git地址）

小程序的特点

小程序在目前越来越流行，离不开小程序的特点：

对于用户来说：
  ①无需安装，即搜即用；
  ②优秀的用户体验，和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

git地址：电商项目小程序demo

https://github.com/helen1314181/mini-program