小程序项目核心点总结

图片上传大小问题

• 图片：

  • 静态页：帮助我们搭建页面；
  • 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文件封装功能的很丰富；

• 小程序目前不支持直接引入 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函数内部：
  

小程序开启调试