微信小程序知识及项目案例

技术2022-07-11 106

教程地址

代码地址

微信小程序文档

代码参考

小程序文件结构和传统web对比

基本的项目结构

全局配置app.json

vs插件：小程序开发助手

列表循环和对象循环

block标签的使用

条件渲染

事件绑定

样式rpx

样式导入

选择器

小程序中使用less

常见标签

view

小程序生命周期

应用生命周期

页面生命周期

小程序的第三方框架

项目搭建

接口文档

帮助文档

小程序开发文档阿里巴巴字体iconfont MDN

新建小程序项目

搭建目录结构

搭建项目的页面

引入字体图标

分类

使用缓存技术

web中的本地存储和小程序中的本地存储的区别

1 写代码的方式不一样 web：localStorage.setItem（“key”,“value”) localStorage.getItem(“key”) 小程序中：wx.setStorageSync(“key”,“value”);wx.getStorageSync(“key”); 2 存的时候有没有做类型转换 web：不管存入的是什么类型的数据，最终都会先调用toString（），把数据变成了字符串，再存入进去小程序：不存在类型转换的操作，存什么类型的数据，获取时就是什么类型

使用

1 先判断一下本地存储中有没有旧的数据 {time：Date.now(),data:[…]} 2 没有旧的数据直接发送新请求 3 有旧的数据，同时旧数据没有过期，就使用本地存储中的旧数据即可

// 1 获取本地存储中的数据（小程序中存在本地存储技术） const Cates = wx.getStorageSync("cates"); // 2 判断 if(!Cates){ // 不存在发送请求获取数据 this.getCates(); }else{ // 有旧的数据，定义过期时间 10s改成5分钟 if(Date.now()-Cates.time>1000*10){ // 重新发送请求 this.getCates(); }else{ // 可以使用旧的数据 this.Cates=Cates.data; let leftMenuList=this.Cates.map(v=>v.cat_name); let rightContent=this.Cates[0].children; this.setData({ leftMenuList, rightContent }) } }

右侧列表置顶

scrollTop

小程序中支持es7的async语法

多行文字溢出…

.box { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

注意：-webkit-line-clamp是webkit的私有属性，是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。