图片上传大小问题![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4225e9538931ff9382ced21f62d2c9eb.png)
-
图片:
- 静态页:帮助我们搭建页面;
- JS:图片信息都是后台返给我的图片地址!
-
就想预览:
- 可以把本地图片上传到公司的服务器,把图片地址都给我;
- 现在没有服务器;
v2样式
- 去掉 否则设置的样式有问题 权重不够 两种方式 important 和删掉
事件
- 事件默认是在冒泡阶段执行 (bind)
- 如果在冒泡阶段 发现父辈的节点也注册同样的事件 父级事件函数也会执行
小程序捕获错误
App({
// 生命周期:函数,内置的;特点:会在特定的节点执行
// 小程序启动的时候:
onLaunch() {
console.log("小程序启动了");
// console.log(a);
},
// 前台显示
onShow() {
console.log("wxAPP 显示了");
},
// 切后台的时候
onHide() {
console.log("wxAPP 切后台");
},
//捕获小程序的错误 给用户弹窗提示
onError() {
console.log("wxapp 出错了");
},
// 小程序在启动的时候,设置体验的页面,没有找到的话,onPageNotFound函数执行;
// 启动后:如果页面找不到,不会执行onPageNotFound了。
// 意义:当小程序启动时,给用户一个友好提示:弹窗:
onPageNotFound() {
console.log("页面找不到友好提醒");
},
})
模块化
**公共方法 **:获取系统时间:
- 语法:小程序遵循的是类似 CommonJS 的规范。通过 module.exports 或 exports 对外暴露接口,通过 require 导入模块。
- 用处:公用的方法的可以写在一个JS文件内,供每个页面使用。
npm 模块
-
语法:module.exports
- 在学习npm :包背后JS,如何导出
module.exports
- 小程序能使用这些包?能;
- 为什么要使用这些包? 前端包JS文件封装功能的很丰富;
- 在学习npm :包背后JS,如何导出
-
小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候使用小程序支持的 npm功能。
-
使用步骤:
-
npm init -y
-
npm i mine -S
:随便下载我们需要用到的包 -
点击微信开发工具 / 工具 / 构建npm:
-
详情/本地设置:使用npm模块
-
测试
小程序寻找包的规则:在JS页面中使用require
-
优先:寻找
miniprogram_npm
下的包 -
如果没有,则找当前路径下,有没有这个名字的JS文件
-
如果没有,则页面报错找不到;
getApp()
- 文件作用域:在 JavaScript 文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。
- 定义全局的数据:
- 在任何页面的JS中使用:
- 意义:共享数据和方法
- 在页面的JS内引入使用:
- 页面没有显示
- 目前解决:但是这样操作其实已经改变JS内置的data的数据了;
wxs
-
想要不改变data里的数据 还想渲染出特定的数据
-
参考vue 中filter 过滤器
-
问题的原因 小程序设计的时候 渲染层和jscore逻辑层是相互独立的
-
渲染层 包括 wml wxss wxs
可以在wxml 里面使用 wxs 里面定义的属性和方法 直接用
需知: -
1.使用wxs,要通过
wxs标签
在wxml引入; -
2.wxs标签支持模块化:使用
module.exports
-
3wxs标签 必须 有
module
属性(属性值就是该wxs标签内部作为模块导出的对象名,在wxml内使用)
注意:wxs 中的语法不完全支持 js语法 不支持会报错
公共wxs
- 定义wxs文件:
- 引入,使用
-
意义:
- 1.解决模块化的需求
- 2.可以在wxml标签内直接使用定义的方法,而且和JS的内置的逻辑没有任何关系,非常的方便!
-
- 变量:不能使用 const
- 变量名:定义没有$
- 其他的使用:按照基础的JS使用来就行;
总结
* 自己的定义的JS文件或者在App内设置的数据,可以作为公共数据分享;
- npm模块:第三方模块包,已经写好得更为丰富的方法;
- wxs:其实就是在负责渲染层(视图层)的数据展示处理,就是vue中的数据过滤;
组件通信
-
小程序自定义组件与
页面page
主要有两点不同:- 页面JS调用的函数不同;
- JSON配置:有标识自己为组件的属性
component
-
在页面中使用:
- 在index.json文件中注册
- 在wxml中使用;单标签双标签都可以
父子组件
- 子级:接受数据,设置属性:
子级–>父级
- 子组件JS:定义自定义事件名称:
- 子组件wxml:在子组件内调用函数及触发:
- 父组件wxml:子组件绑定自定义事件及父级的回调函数:
- 父组件JS:f_send函数内部: