为什么要学点小程序前端

要学点前端
前端知识太不扎实, 需要写点小项目的时候, 肯定要前端开展现. 但现在的三脚猫功夫, 差得太远, 做起来干着急, 不出活.
要用小程序
小程序太方便了, 轻量, 高效, 方便使用.
学习来源

从零开始直接写, 边做边学的学习方式看似合乎逻辑且高效, 实则很低效. 直接看文档吧, 没有实操经验, 理解能力跟不上. 相比之下, 跟着视频先做一遍对入门还是很有帮助的. 做技术讲解的视频太多了, 但讲得好的,让人听着舒服的却很少. 有些老师说话不够干净利索, 有些老师喜欢刻意说点无意义骚话, 有些又太死板…找到一个自己喜欢的老师, 太难了. 讲课这事, 天赋(讲话的习惯)和努力(语言的自我控制)都很重要. 这次找到了一个特别合心意的老师: B站视频, 接下来就是学习, 模仿, 与记录了. ##
text 行级元素, view 块级元素
多层循环时, 使用wx:for-item=”item”, wx:for-index=”index” 指定不同嵌套层的index与item
block标签: 渲染一个空白的结构块, 不会变成真正的block元素
条件渲染 wx:if=”“(适用在不频繁切换) hidden=”“(适用于频繁切换)

小程序中的事件无法直接参数, 需要自定义属性传参.

# wxml 
<button bindtap="add" data-operation="1">+</button>
# js
  data: {
 num:0
  },
  add(e){
 console.log(e)
 this.setData({
   num : this.data.num+e.currentTarget.dataset.operation
 })
  },

计算样式 width:calc(750rpx * 100 / 375)
@import可以导入外联样式, 但只支持相对路径: @import “../styles/common.wxss”
less-css的功能:

1) 定义颜色: @color: yellow 2) 导入less文件: @import “../../style/reset.less”, 可使用定义的全局变量

自定义组件

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

display: flex 伸缩盒子, 行内元素也可以定义为伸缩盒子: display: inline-flex; ``` flex有六个属性: flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; flex-flow: flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 justify-content: 项目在主轴上的对齐方式, 取值为: flex-start(左对齐) | flex-end(右对齐) | center | space-between (两端对齐，项目之间的间隔都相等)| space-around (每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。); align-items: 项目在交叉轴上如何对齐, 取值为: flex-start | flex-end | center | baseline(项目的第一行文字的基线对齐) | stretch(如果项目未设置高度或设为auto，将占满整个容器的高度); align-content

flex的项目的属性: order: 数值越小越靠前 flex-grow: 项目的放大比例, 默认为0, 不放大 flex-shrink: 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 flex-basis: 在分配多余空间之前，项目占据的主轴空间（main size） flex: 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 align-self: 属性允许单个项目有与其他项目不一样的对齐方式

11. let命令，用来声明局部变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效, 如{}
12. ES6解构

const {index} = e.currentTarget.dataset //获取this.data.tabs的一份变量的引用 //最严谨的做法 let tabs = JSON.parse(JSON.stringify(this.data.tabs)); let {tabs} = this.data tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false) this.setData({ tabs })

13. 父向子组件传递

父组件传递prop:

子组件接收: properties: { prop: { type: String, value: “” }, },

14. 子组件向父组件传递

父组件:

handleItemChange(e){ // let {tabs} = this.data console.log(e) const {index} =e.detail let {tabs} = this.data tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false) this.setData({ tabs }) }, 子组件: handleItemTap(e) { console.log(e) const {index} = e.currentTarget.dataset this.triggerEvent("itemChange",{index}) }, properties: { tabs: { type: Array, value: [] }, }, ``` 15. 子组件中的是占位符, 来接收父组件传来的内容 16. 小程序的第三方框架: 腾讯 wepy, 美团 mpvue, 京东 taro, 原生框架: MINA 17. 在wxss中使用变量 ``` 定义: page{ --themeColor: #eb4450; } 使用: view{ color: var(--themeColor); } ``` 18. 制作搜索框, 重要的是: 外部padding10, height 固定, 内部navigator 圆角10rpx, display: flex, 水平竖直居中, 高度100% ``` 搜索 .search_input{ height: 90rpx; background-color: var(--themeColor); padding: 10rpx; } navigator{ color: #666; border-radius: 10rpx; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; } ``` 19. request ``` 1. 定义公共方法 export const request=(params)=>{ return new Promise((resolve,reject)=>{ wx.request({ ...params, success:(result)=>{ resolve(result); }, fail:(err)=>{ reject(err); } }); }) } 2. 导入方法 import {request} from "../../request/index.js"; 3. 使用 onLoad: function (options) { request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"}) .then(result=>{ console.log(result) this.setData({ swiperList: result.data.message }) }) }, ``` 20. 将屏幕分为左右两部分 ``` .cates_container{ height: 900rpx; display: flex; } .left_menu{ flex: 2; } .right_content{ flex: 5; } ``` 21. web中的本地储存与小程序的本地储存 ``` web: localStorage.setItem("key","value") 小程序: wx.setStroageSync("key","value") wx.getStroageSync("key") ``` 22.

CODE ICU

Code Recording 就是好玩

小程序前端学习

为什么要学点小程序前端

学习来源