微信小程序开发前端

https://www.bilibili.com/video/BV1nE41117BQ?from=search&seid=7863352948741401244&spm_id_from=333.337.0.0

黑马程序员微信小程序开发前端教程_零基础玩转微信小程序

P1 01-课程介绍

小程序基础
小程序的前世今生
小程序开发者工具
小程序原生框架
小程序模板语法
小程序内置组件
小程序生命周期
小程序自定义组件

P2 02-微信小程序介绍

1.4.还有其他的小程序不容忽视
1、支付宝小程序
2，百度小程序
3.QQ小程序
4.今日头条+抖音小程序

P3 03-微信小程序的环境准备

P4 04我的第一个微信小程序

默认路径 C:\Users\Administrator\WeChatProjects\

每2个月登录下防冻结

AppID(小程序ID)1960033588@qq.com	wxf5586d615a8bb4ea
826026558@qq.com	wx3ce92e92af9b29b1

879181514@x 826026558@x 1960033588@v

P5 05-微信开发者工具介绍

P6 06-原生框架的目录结构

结构传统web 微信小程序
结构 HTML WXML
样式 CSS WXSS
逻辑 Javascript Javascript
配置无 JSON

P7 07-全局配置文件-pages字段

vscode tools space save refresh

在app.json page字段新写页面保存自动创建

放在第一个显示页面

{
  "pages":[
    "pages/home/home",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

P8 08-全局配置件-window字段

同上

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

P9 09-全局配置文件-tabbar字段

"navigationBarTextStyle": "white", 以前支持#ffffff 现在不行了

P10 10-页面配置文件

page直接写上不用加windows

P11 11-sitmap配置

官网查看

P12 12-数据绑定前的代码编辑器技巧

1 text相当于以前web中的span标签行内元素不会换行
2 view相当于以前web中的div标签块级元素会换行

Page创建对象

vscode 小程序开发助手 plugins

tootls抽风关闭其他点击编译

P13 13-数据绑定

mina

快捷键复制 shift ctril

3 checkbox以前的复选框标签

字符串和花括号之间一定不要存在空格否则会导致识别失败

home.js
 data: {
  msg:'hellowrold'
 },
home.wxml
<text>pages/home/home.wxml</text>
<view data-name='{{msg}}'>{{msg}}</view>
<checkbox checked="{{true}}">呵呵</checkbox>

P14 14-运算

运算=>表达式

P15 15-数组和对象循环

wx:for='数组或者对象' wx:for-item="循环项的名称" wx:for-index="循环项的索引"

2 wx:key="唯一的值" 用来提高列表治染的性能
1 wx:key绑定一个普通的字符串的时候那么这个字符串名称肯定是循环数组中的对象的唯一属性

2 wx:key ="this" 就表示你的数组是一个普通的数组this表示是循环项 [1,2,3,4]

3当出现数组的嵌套循环的时候尤其要注意以下绑定的名称不要重名

4默认情况下我们不写小程序也会把循环项的名称和紊引的名称item和index

对象循环 wx:for-item='value' wx:for-index='key'

  data: {
    msg:'hellowrold',
    list:[
      {id:1,name:'koo'},
      {id:2,name:'john'},
      {id:3,name:'team'},
    ]
  },
<view>
  <view wx:for="{{list}}" wx:for-item='item' wx:for-index='index' wx:key="id">
    {{index}}---{{item.name}}
  </view>
</view>

P16 16-block标签的使用

10 block
1占位符的标签
2写代码的时候可以看到这标签存在
3页面渲染小程序会把它移除掉

P17 17-条件渲染

条件渲染 wx:if="{{true/false}}" wx:elif="{{true}}" wx:else

在标签上直接加入属性hidden

3什么场景下用哪个
1当标签不是频繁的切换显示优先使用wx:if 直接把标签从页面结构给移除掉(耗性能)
2当标签频繁的切换显示的时候优先使用hidden 通过添加样式的方式来切换显示

hidden属性不要和样式display一起使用

P18 18-事件绑定1

1需要给input标签绑定input事件
绑定关键字bindinput

2如何获取输入框的值
通过事件源对象来获取
e.detail.value

this.data.num=e.detail.value x

this.num=e.detail.value x

Page({
     data: {
    num:0
  },
  handle(e){
    this.setData({f
      num:e.detail.value
    })
  },
})
<input bindinput="handle" type="text" style="border:1px solid #000;"/>
<view>
  {{num}}
</view>

P19 19-事件绑定2

4需要加入一个点击事件click改bindtap
1 bindtap
2无法在小程序当中的事件中直接传参
3通过自定义属性的方式来传递参数
4事件源中获取自定义属性

old不需要parseInt

获取直接this.data.num 设置要this.setData({})

Page({
      data: {
    num:0
  },
  handletap(e){
    let count=e.currentTarget.dataset.count
    this.setData({
      num:this.data.num+parseInt(count) 
    })
  },
})
<view>
  {{num}}
</view>
<button data-count="1" bindtap="handletap">+</button>
<button data-count="-1" bindtap="handletap">-</button>

P20 20-样式-rpx

响应式长度单位rpx 或百分比%

1小程序中不需要主动来引入样式文件

calc(750rpx * 100 / 375)

P21 21-样式-导入

创建文件夹 / 创建目录 style/common

1引入的代码是通过@import来引入
2路径只能写相对路径

@import './common.wxss';

P22 22-样式-选择器和使用less

特别需要注意的是小程序不支持通配符*

.class #id element element,element nth-child(n) ::after ::before

其他基于小程序的框架大体都支持，如wepy，mpvue，taro等

vscode plugins easy less 将less文件改成wxss 不用时记得去掉/改.css/注释掉

    "less.compile": {
        "outExt": ".wxss"
    }

创建或改文件成less 写代码保存自动生成wxss

选择支持了ts sass less

P23 24-view和text标签

常用的布局组件

view text rich-text button image

navigator icon swiper radio checkbox

10.2.text
1，文本标签
2只能嵌套text
3，长按文字可以复制（只有该标签有这个功能）
4，可以对空格回车进行编码

P24 25-image图片标签

https://images.ac.cn

image图片标签
1 src指定要加载的图片的路径
图片存在默认度和高度326*240

2 mode决定图片内容如何和图片标签宽高做适配
1 scaleToFil1默认值不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素

2 aspectFit保持宽高比确保图片的长边显示出来页面轮播图常用
aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来。少用

4 wiathFix以前web的图片的宽度指定了之后高度会自己按比例来调整常用

5 bottom.。类似以前的backgroud-position

3小程序当中的图片直接就支持加lazy-load
1 lazy-load会自己判断当图片出现在视口上下三屏的高度之内的时候自己开始加载图片

P25 26-swiper等比例计算swiper的高度

swiper s歪p

里面必放swiper-item

image单标签最好

1轮播图外层容器swiper
2每一个轮播项swiper-item
3 swiper标签存在默认样式
1 width 100%
2 height 150px image存在默认宽度和商度320*240
3 swiper高度无法实现由内容撑开
先找出来原图的宽度和高度等比例给swiper定宽度和高度

淘宝手机图片

原图宽度商度 1125352 px
swiper宽度/swiper 高度=原图的宽度/原图的高度
swiper 高度 = swiper宽度原图的高度/原图的宽度
height：100vw*352/1125

<swiper>
  <swiper-item>
    <image mode="widthFix" src="//gtms04.alicdn.com/tps/i4/TB1pgxYJXXXXXcAXpXXrVZt0FXX-640-200.jpg" />
    <image mode="widthFix" src="https://img.alicdn.com/simba/img/TB15tIjGVXXXXcoapXXSutbFXXX.jpg" />
    <image mode="widthFix" src="//img.alicdn.com/imgextra/i3/6000000003470/O1CN01yItP7Y1bVJ4W8igKo_!!6000000003470-0-lubanimage.jpg" />
  </swiper-item>
</swiper>
swiper{
  width: 100%;
  height: calc(100vh * 352 / 1125);
}
image{
  width: 100%;
}

P26 27-swiper-常见属性

5 autoplay自动轮播
6 interval修改轮播时间
7 circular衔接轮播
8 indicator-dots显示指示器分页器索引器
9 indicator-color指示器的未选择的颜色
1e indicator-active-color选中的时候的指示器的颜色

<swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
  <swiper-item>
    <image mode="widthFix" src="//gtms04.alicdn.com/tps/i4/TB1pgxYJXXXXXcAXpXXrVZt0FXX-640-200.jpg" />
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="https://img.alicdn.com/simba/img/TB15tIjGVXXXXcoapXXSutbFXXX.jpg" />
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="//img.alicdn.com/imgextra/i3/6000000003470/O1CN01yItP7Y1bVJ4W8igKo_!!6000000003470-0-lubanimage.jpg" />
  </swiper-item>
</swiper>

P27 28-navigator导航标签

导航组件navigator
0 块级元素默认会换行可以直接加宽度和高度
1 url耍跳转的页面路径绝对路径相对路径

2 target要跳转到当前的小程序还是其他的小程序的页面
self默认值自己小程序的页面
miniProgram其他的小程序的页面
3 open-type跳转的方式
1 navigate默认值保留当前页面，跳转到应用内的某个页面，但是不能跳到tabbar页面

2 redirect 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面。

3 switchTab跳转到tabBar页面，并关闭其他所有非tabBar页面

reLaunch 关闭所有页面，打开到应用内的某个页面随便跳

相对路径

跳转轮播图

P28 29-rich-text富文本标签

rich-text 相当 v-html

<rich-text nodes="{{html}}"></rich-text>
Page({
    data:{
        html:'<div>呵呵呵</div>'
    }
})

1标签字符串最常用的 2对象数组

<rich-text nodes="{{html}}"></rich-text>
Page({
    data:{
        html:[
      {
        //1 div标签name属性来指定
        name:'div',
        //2标签上有哪些属性
        attrs:{
          //标签上的属性class style
          class:'my_div',
          style:'color:red'
        },
        //3子节点children要接收的数据类型和nodes第二种渲染方式的数据类型一致
        children:[
          {
            name:'p',
            attrs:{},
            //放文本
            children:[
              {
                type:'text',
                text:'hello'
              }
            ]
          }
        ]
      }
    ]
    }
})

rich-text 可以用html的标签看官网文档

P29 30-button-外观样式

button标签
1外观的属性
1 size控制按钮的大小
1 default默认大小
2mini小尺寸
2 type用来控制按钮的颜色
1 default灰色2 primary绿色3 warn红色
3 plain 按钮是否镂空，背景色透明

4.loading

css可以控制样式的

P30 31-button的开放能力1

button开发能力
open-type：

<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button bindgetphonenumber="getPhoneNumber" open-type="getPhoneNumber">getPhoneNumber</button>
<button bindgetuserinfo="getUserInfo" open-type="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>
Page({
    getPhoneNumber(e){
    console.log(e)
  },
  getUserInfo(e){
    console.log(e)
  },
})

1 contact直接打开客服对话功能带要在微信小程序的后台配置
2 share转发当前的小程序到微信朋友中不能把小程序分享到朋友圈
3 getPhoneNumber获取当前用户的手机号码信息结合一个事件来使用不是企业的小程序账号没有权限来获取用户的手机号码

1绑定一个事件bindgetphonenumber
2在事件的回调函数中通过参数来获取信息 3获取到的信息已经加密过了需要用户自己待见小程序的后台服务器，在后合服务器中进行解析手机号码，返回到小程序中就可以看到信息了

4 getuserInfo获取当前用户的个人信息

1使用方法类似获取用户的手机号码
2可以直接获取不存在加密的字段

5 launchApp在小程序当中直接打开app

1需要现在app中i过app的某个链打开小程序
2在小程序中再通过这个功能重新打开app
3找到京东的app和京东的小程序

6 opensetting打开小程序内置的授权页面

1授权页面中只会出现用户曾经点击过的权限

7 feedback打开小程序内置的意见反馈页面

1只能够通过真机调试来打开

P31 32-button的开放能力2

官网添加客户号

P32 33-icon图标

P33 34-radio单选框

radio单选框
1 radio标签必须要和父元素radio-group来使用
2 value选中的单选框的值

3需要给radio-group绑定change事件 bindchange='handleChange' femala gender
4需要在页面中显示选中的值

Page({
     data: {
    gender:''
  },
  handleChange(e){
    let gender=e.detail.value
    this.setData({
      // gender:gender
      gender
    })
  },
})
<radio-group bindchange="handleChange">
  <radio color="red" value="male">男</radio>
  <radio color="red" value="famale">女</radio>
</radio-group>
<view>{{gender}}</view>

P34 35-checkbox复选框

带checkbox-group

<checkbox-group bindchange="handleItem">
  <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="{{item.id}}">{{item.name}}</checkbox>
</checkbox-group>
<view>{{listArray}}</view>
Page({
     data: {
    list:[
      {id:1,name:'koo',value:'koo'},
      {id:2,name:'joo',value:'joo'},
      {id:3,name:'team',value:'team'},
    ],
    listArray:[]
  },
  handleItem(e){
    this.setData({
      listArray:e.detail.value
    })
  },
})

P35 36-自定义组件的介绍

公共内容

P36 37-自定义组件的初体验

创建组件 components 右击component

声明在使用组件的页面 json里面

{
  "usingComponents": {
    "Tabs":"../../components/Tabs/Tabs"
  }
}

使用组件在页面wxml 里面使用

P37 38-自定义组件-Tabs-样式优化

.active{
  color: red;
  border-bottom: 10rpx solid currentColor;
}

currentColor当前颜色

flex布局 display:flex flex:1

class="title_item {{item.isActive?'active':''}}"

P38 39-自定义组件标题激活选中

1页面.js文件中存放事件回调函数的时候存放在data同层级下！！！
2组件.js文件中存放事件回调函数的时候必须要存在在methods中！！！

解构对复杂类型进行结构的时候复制了一份变量的引用而已
最严谨的做法重新拷贝一份数组，再对这个数组的备份进行处理
不要直接修改this.data.数据

bindtap="handleItemTap" data-index="{{index}}"

// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
  },
  /**
   * 组件的初始数据
   */
  data: {
    tabs:[
      {id:0,name:'首页',isActive:true},
      {id:1,name:'原创',isActive:false},
      {id:2,name:'分类',isActive:false},
      {id:3,name:'关于',isActive:false},
    ]
  },
  /**
   * 组件的方法列表
   */
  methods: {
    handleItemTap(e){
      const {index}=e.currentTarget.dataset;
      let {tabs}=this.data;
      tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)
      this.setData({
        tabs
      })
    }
  }
})

P39 40-自定义组件父向子传递数据

1父组件（顶面）向了组件传递数据通过标签属性的方式来传递

1在子组件上进行接收

properties里面存放的是要从父组件中接收的数据

2把这个数据当成是data中的数据直接用即可

父:<Tabs aaa='abc'></Tabs>
子:
Component({
      /**
   * 组件的属性列表
   * properties里面存放的是要从父组件中接收的数据
   */
  properties: {
    //要接收的数据的名称
    aaa:{
      type:String,//type 要接收的数据的类型
      value:'default'//value默认值
    }
  },
})
<view>
  {{aaa}}
</view>

P40 41-自定义组件-子向父传递数据

5点击事件触发的时候
触发父组件中的自定义事件同时传递数据给父组件this.triggerEvent（"父组件自定义事件的名称"，要传递的参数）

2子向父传递数据通过事件的方式传递
1在子组件的标签上加入一个自定义事件

子:
Component({
    methods:{
            handleItemTap(e){
      const {index}=e.currentTarget.dataset;
      this.triggerEvent('itemChange',{index}) 1111111111
    }
    }
})
父:
<Tabs binditemChange='handleItemChange' tabs='{{tabs}}'></Tabs> 2222222222
Page({
      handleItemChange(e){
    const {index}=e.detail; 333333333
    let {tabs}=this.data;
      tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)
      this.setData({
        tabs
      })
  },
})

P41 42-自定义组件-slot

slot标签其实就是一个占位符插槽
等到父组件调用子组件的时候再传递标签过来最终这些被传递的标签
就会替换slot插槽的位置

占位符最终不显示在页面

<Tabs binditemChange='handleItemChange' tabs='{{tabs}}'>
  <block wx:if="{{tabs[0].isActive}}">0</block>
  <block wx:elif="{{tabs[1].isActive}}">1</block>
  <block wx:elif="{{tabs[2].isActive}}">2</block>
  <block wx:else>3</block>
</Tabs>

P42 43-组件的其他属性

properties data observers methods

组件生命周期 created attached ready moved detached

P43 44-应用生命周期

onlaunch监听小程序初始化。在应用第一次启动的时候获取用户的个人信息
onShow监听小程序启动或切前台。对应用的数据或者页面效果重置
onHide监听小程序切后台。暂停或者清除定时器
onError错误监听函数。在应用发生代码报错的时候，收集用户的错误信息，通过异步请求将错误的信息发送后台去
onPageNotFound页面不存在监听函数。页面找不到就会触发应用第一次启动的时候，如果找不到第一个入口页面才会触发如果页面不存在了通过js的方式来重新跳转页面重新跳到第二个首页

onLaunch() on乱起

模拟操作前台后台

在onLaunch随便打 error

wx.navigateTo()

P44 45-页面生命周期

data
onLoad 发送异步请求来初始化页面数据
onShow
onReady
onHide
onUnload
onPullDownRefresh 页面的数据或者效果重新刷新
onReachBottom
onShareAppMessage
onPageScroll
onResize 小程序发生了横屏竖屏切换的时候触发 json加代码开启
onTabltemTap

解释如下:

页面的初始数据
生命周期回调一监听页面加载
生命周期回调一监听页面显示
生命周期回调一监听页面初次治染完成
生命周期回调一监听页面隐藏
生命周期回调一监听页面卸载
监听用户下拉动作
页面上拉触底市件的处理函数
用户点击右上角转发
页面滚动触发本件的处理函数
页面尺寸改变时触发，详见响应显示区域变化
当前是tab页时，点击tab时触发

view&*100jdg

P45 01-项目预览

滚动条只在模拟器真机不存在

P46 02-项目的技术选型

小程序的第三方的框架
1.腾讯wepy 类似vue
2，美团mpvue语法类似vue
3，京东taro类似react
4，滴滴chameleon
5，uni-app类似vue

6，原生框架MINA

P47 03-项目搭建步骤一

接口:https://www.showdoc.cc/128719739414963?page_id=2513235043485226

2.帮助文档
1，小程序开发文档
2.mdn
3、阿里巴巴字体iconfont

P48 04-项目搭建步二(引入iconfont)

P49 05-项目搭建步骤三(搭建tabbar)

P50 06-项目搭建步骤四-初始化页面样式

快捷键x

主题颜色通过变量来实现
1 less中存在变量这个知识
2原生的css和wxss也是支持变量

fs28rpx快捷键

P51 07-首页-搜索框

P52 08-首页-获取轮播图数据

https://api.zbztb.cn/api/public/v1/home/swiperdata old不行

https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata new行

https://www.showdoc.com.cn/128719739414963/2513235043485226 文档

P53 09-首页-轮播图-动态渲染

1 swiper标签存在默认的宽度和高度

100%*150px

2 image标签也存在默认的宽度和高度

320рх*240рх

3设计图片和轮播图

1 先看一下原图的宽高 750*340

2让图片的高度自适应宽度等于100%

3 让swiper标签的高度变成和图片的高一样即可

4图片标签

mode属性渲染模式

widthFix 让图片的标签宽高和图片标签的内容的宽高都等比例的发生变化

P54 10-将原生的请求修改为promise的方式

优化的手段可以通过es6的 promise来解决这个问题

P55 11-首页-分类导航

P56 12-首页-楼层1

P57 13-首页-楼层2

用vscode less

P58 14-分类-接口数据和页面效果的关系

P59 15-分类-获取接口数据

P60 16-分类-页面布局1

scroll-view组件

calc(100vh - 10rpx) 计算

view{$}*5 快捷键

P61 17-分类-页面布局2

justify-content: center; 水平居中

align-items: center; 垂直居中

flex-wrap: wrap; 换行

P62 18-分类点击菜单切换商品内容

P63 19-分类-使用缓存技术

P64 20-分类点击菜单-右侧列表置顶

P65 21-优化接口代码-提取公共接口路径

P66 22-优化接口简化返回值和使用es7的async

regenerator/packages/regenerator-runtime/runtime.js

https://raw.githubusercontent.com/facebook/regenerator/main/packages/runtime/runtime.js

https://github.com/facebook/regenerator/blob/main/packages/runtime/runtime.js

使用地方用 import regeneratorRuntime from '../../lib/runtime/runtime';

P67 23-商品列表-获取分类id

url传参

onLoad: function (options) {

console.log(options)

}, options传递参数在里面

P68 24-商品列表-实现搜索框和tabs组件

P69 25-商品列表-静态样式

http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000193373779_1_400x400.jpg

在线转less to css https://www.matools.com/less

P70 26-商品列表-动态渲染

P71 27-商品列表-加载下一页数据

P72 28-商品列表-下拉刷新

P73 29-添加全局的正在加载中图标效果

P74 30-商品详情-获取数据

P75 31-商品详情接口数据和页面分析

P76 32-商品详情-轮播图动态渲染

P77 33-商品详情-价格&名称&图文详情

P78 34-商品详情优化动态渲染

P79 35-商品详情-放大预览图片

vscode wx-xxx 快捷键

wx.previewImage

P80 36-商品详情-底部工具栏

navigator open-type switchTab reLanuch

P81 37-商品详情-加入购物车

缓存数组注意打不开

P82 38-购物车-购物车分析&收货按钮样式

P83 39-购物车-收货地址分析

P84 40-购物车-完整的获取收货地址流程

1获取权限状态

wx.getSetting

wx.chooseAddress 获取地址

wx.openSetting 打开授权页面

P85 41-购物车-优化获取收货地址的代码

加入async await promise对象变数据

P86 42-购物车收货地址和按钮切换显示

P87 43-购物车-购物车列表-静态样式

Generate Css tree https://www.jianshu.com/p/afa3d0957922

P88 44-购物车-底部工具栏-静态结构

P89 45-购物车-数据动态渲染

P90 46-购物车-全选-数据展示

// every 数组方法会遍历会接收一个回调函数那么每一个回调函数都返回true 那么 every方法的返回值为true

// 只要有一个回调函数返回了false 那么不再循环执行，直接返回false

P91 47-购物车-总价格和总数量

三目运算 every forEach

P92 48-购物车-商品选中

cart.findIndex

P93 49-购物车-全选-反选

P94 50-购物车-商品数量编辑

P95 51-购物车-商品删除

wx.showModal

P96 52-购物车没有商品的状态提示

购物车空找后台找素材

P97 53-购物车结算按钮功能

P98 54-支付-数据展示

P99 55-支付-支付权限的分析

P100 56-支付-订单创建分析

P101 57-支付-获取用户token

110

wx.login

P102 58-支付-创建订单

P103 59-支付-完成微信支付

wx.requestPayment tools不写wx直接写快捷键

P104 60-支付移除购物车已经支付的数据

P105 61-封装统一的请求头到request方法中

P106 62-登录-获取用户信息

P107 63个人中心-背景展示

vh 视图高

https://www.runoob.com/cssref/css3-pr-filter.html CSS3 filter(滤镜) 属性

P108 64个人中心-历史足迹&我的订单-静态结构

P109 65个人中心其他的静态结构

P110 66-订单查询-引入tabs组件

P111 67-订单查询-获取订单接口数据

120

P112 68-订单查询-动态修改订单标题

P113 69-订单查询-页面动态渲染

P114 70-商品详情-页面加载获取收藏数据

P115 71-商品详情-点击图标切换收藏

P116 72个人中心-显示收藏的商品数量

P117 73-商品收藏-引入自定义tabs组件

P118 74商品收藏-页面动态渲染

P119 75-搜索中心-静态页面

overflow: hidden; 超出隐藏
        white-space: nowrap; 不换行
        text-overflow: ellipsis; 多余点点显示

P120 76-搜索中心-渲染搜索结果

bindinput='handleInput'

vscode lorem快捷键文字

P121 77-搜索中心-防抖的实现

2防抖（防止抖动）定时器节流

0 防抖一般输入框中防止重复输入重复发送请求

1节流一般是用在页面下拉和上拉

1定义全局的定时器id

全局 TimeId:-1
clearTimeout(this.TimeId)
    this.TimeId=setTimeout(() => {
      this.qsearch(value)
    }, 1000);

P122 78-搜索中心-页面痕迹重置

P123 79-意见反馈引入tabs组件

意见反馈小程序内置

P124 80-意见反馈-静态结构

130

Power Mode https://www.cnblogs.com/echolun/p/11454915.html

justify-content j踢法康疼

P125 81-意见反馈-自定义图片组件

P126 82-意见反馈-选择并显示图片

//2调用小程序内置的选择图片api

wx.chooseImage

简单数组 wx:for wx:key='*this'

P127 83-意见反馈-删除图片

P128 84-意见反馈提交功能

3准备上传图片到专门的图片服务器
上传文件的api不支持多个文件同时上传遍历数组挨个上传

wx.uploadFile()

https://images.ac.cn/Home/Index/UploadAction/

显示正在等待的图片 wx.showLoading()

wx.hideLoading()

P129 85-首页-添加商品的跳转链接

P130 86-项目发布

2m 分包10m

https://mp.weixin.qq.com/

posted @ 2024-12-14 14:18 KooTeam 阅读(109) 评论(0) 收藏举报

刷新页面返回顶部

KooTeam

Knowledge makes humble,ignorant makes proud!