Hbuilder 小程序开发

发行到微信开发者工具中

语法

export default 和 export 导出的区别

• export default 一个vue.js中 只能用一次，暴露一个方法，但是 导入简单
• export 可以用多次，暴露多个方法， 但是导入 得用 import {} from
  

页面初始化加载

• vue: created() 、或 mounted
• uni-app: onLoad()

实现页面跳转 2种方式

• 1. navigator 组件
     
• 2. api

两者都是 点击触发：
如果一开始设计页面时，可以用navigator,
如果是页面写到一半，再想加跳转， 用navigator 可能会破坏 已有的样式，改动较大。 推荐api方式

注：不能跳转到 tabbar, 需要使用 switchTab 进行 tabbar 之间的切换

• 页面跳转 传参
  

学会用【微信开发者工具】 调试代码

样式调试 flex

一行显示 ： flex

vue v-for 遍历 根据后端数据 动态加载list

then 和 async、await

Promise 是前端用来处理异步的， vue 和java不同，java中有多线程，vue 没有，用Promise


用await 等待Promise 的结果，外边必须配合 async 使用 ，就是固定的语法，不用纠结： 用了 await 就得配合async,
要不然就乖乖的用 then 写一大长串

vue 中的method 提取封装到 .js中，公用

提取公共 url baseURL

fly.config.baseURL

楼层布局 对齐：

设置楼体边距

楼体右侧部分 四张图片 边距

楼层数据 动态渲染 ，后端接口数据

图片点击事件 进入端口列表

微信开发工具，编译、普通编译 指定跳转页面

编写端口列表页面布局

左侧图片，右侧文字信息

Vant 万特

类似于 Vue 的element-ui , vant 提供了轻量可行的小程序UI组件库

例如：

下载安装

上拉触底 和 下拉刷新

下拉刷新的一个小优化

触发下拉刷新，数据加载完成后，应该自动关闭刷新，uni.stopPullDownRefresh();
但是直接在公共方法 getGoodsList() {
…
uni.stopPullDownRefresh();
} 中调用，
上拉触底时也会用该函数，但是它并不需要调用stopPullDownRefresh()，没意义，（结果不影响，只是小优化）

引出钩子函数，和函数参数

页面跳转详情

方式当然还是上面提到的两类3种，
这里用navigateTo

详情页

• 详情页轮播图
  
• 鼠标点击预览
  

轮播下面的端口信息

首先 学会盒子拆分

一行一行的 分三部分

三个 view 分了三部分，中间的view 用flex 在一行显示即可

热卖部分

<rich-text  富文本组件  解析 html str 

小优化： html 标签组成的图片之间 有缝隙 怎么去除

补充： 块级元素、行内元素、行内块

解决 行内元素的间距： 行转块

解决：

优化二： .webp 格式图片 在IOS显示 不畅， 转成.jpg

优化三：商品信息区(价格），页面加载时，undefind 闪烁一下

详情页底部

vant 万特

有了

购物车

一些数据 会在多个页面中用到， 应该集中式存储管理，用到 vuex 库

• 只需在项目中创建 store 文件夹 存放vuex 相关的模块，不需要 npm 下载，因为vue 已经内置了

vue 计算属性中的方法 computed { }

vue 中 两种存放数据的地放：

• data { // 定义数据 }，
• computed {// 定义方法 返回数据 ，所以称之为计算属性}
  
  计算属性： computed，定义方法，然后通过计算 返回数据
  

加购物车

引入 createLogger ， 不再用console.log() 调试

uni-app 本地存储 小程序本地

uni-app 本地读取

微信开发者工具，查看本地数据

tabbar 上购物车图标上的 数量

封装收货地址组件 所有页面使用

创建成功之后，直接使用就可以了

收货地址的动态渲染 v-if v-else

点击[请选择收货地址八时想打开微信现成的收获地址弹框

自定义组件

props属性参考