• 各种文件作用
  • .js 逻辑
  • .json
  • .wxml 布局文件 页面独享
  • .wxss
• 首页的代码放在index, logs页面的代码放在logs文件
• 两种代码性质
  • 全局性质代码（全局通用文件）：页面共享的配置信息 存放在app.json
    • app.js 共享逻辑
    • app.json 共享的配置：用于配置页面 包含哪些组成部分，
    • app.wxss 共享的样式
  • 页面性质代码（页面级别文件）：每个页面单独使用的代码，放在每个pages下面， 比如.wxml文件，存在共同配置的时候 局部会覆盖全局，页面的有限级高于全局。
    • index.js, json，wxss, wxml

小程序文件分类

• 配置层 *.json
  •  
• 视图层 .wxss .wxml
  • 布局样式
• 逻辑层 *.js

基础API学习：通过官方API来进行学习

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

• window
  • 窗口配置，刷新与窗口配置等
• tabBar
  • 底部切换栏
• 在开发时可以将debug:true 进行调试

文档解读

关键在于不同文件的使用

• 小程序配置
• 全局配置 用于app.json

• 页面配置 用于index.json
• sitemap 配置

• 场景值
  • 描述的是进行如微信小程序的方式，二维码，相册等 我们可以对其进行记录来描述哪种方式的推广方式最有用，进行有针对性的推广。
• 框架接口 逻辑层 .js文件 javascript编写
  • 逻辑层将数据进行处理之后发给视图层，同时接受视图层的事件反馈
  • 注册程序APP()
    • 生命周期函数 onLaunch初次加载到内存中执行， onShow将其切换到前台， onHide将其切换到后台时执行,在控制台进行输出 方便我们实时监视程序的运行状态
      • 只有在程序消耗资源过多或者时间过长则会被销毁，否则在切换的时候则会调用上面这两个生命周期行数
      • 这些函数可以输入参数来表示，从什么场景打开的小程序（扫码，程序入口等）；query用于推广时对用户推广数进行统计【重要】
    • 可以在里面定义自己的函数和变量
      • myfunction(){}, globalVariable:"global"; 在app.js中定义的时候（全局的），我们可以在页面的js文件进行调用
      • 使用方法：通过调用ge tApp方法进行获取 ：获取到小程序全局唯一的 App 实例。
  • 页面级别的注册函数Page()
    • mvvm设计思想进行页面开发
    • data, onLoad()页面放入内存时执行只会执行一次 与app的调用过程相似，onShow()只要界面显示则进行调用，onUnload()页面卸载，onPullDownRefresh监听用户下拉动作， 只有在app.json中设置了enablePullDownRefresh=“true”才能允许下拉
    • 可以自定义函数和变量，
      • 开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问
      • 使用bindtap来绑定一个事件的发生
    • 页面的路由，页面的切换以堆栈的形式进行存储，首页在栈底，当前页面在栈顶。
      • 路由栈 相关知识 用到了再仔细了解吧
  • 模块化
    • 将公共的代码抽离成为一个单独的.js文件 作为一个模块，模块只有通过调用module.exports或者exports才能对外进行接口暴露， 使用的时候采用require 来进行导入： 对功能组件进行拆分
  • 调用官方API获取常用功能
    • 提供了丰富的微信原生API：包括获取用户信息，本地存储，支付功能，学习的时候大概看一下功能 再仔细查阅。
• 视图层 xml css
  • WXML 语法参考 .wxml文件
    • 模板template ES6对象解构
    • 事件 点击事件通过bindtap=“名称”进行绑定
    • 改变数据内容 通过this.setData({})进行更改
    • 组件
      • 视图组件 <view/><view>
    • 引用
      • import可以在该文件中使用目标文件定义的template
      • 只支持一层的模板引入
      • include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置，如：
    • <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性
    • 一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

• • WXS 语法参考 .wxss文件

扫描二维码关注公众号，回复： 9489453 查看本文章

• 前端页面编辑总结
  • 首先 要构思整个页面由那几个部分构成
  • 每个部分对应使用什么组件来进行显示
  • 构造页面时 由简单到复杂，先编写出基本的再进行样式的调整，最后再编写对应的逻辑，
  • 对于某些需要用户输入信息的选项要确保信息输入正确性，可以在提交的时候进行验证判定。
• 前端如何将构造的数据发送到后端
  • 通过接口的ajax请求的方式发送数据
• 从数据库中取数据
  • 然后展示在页面上，进行业务操作 在地图上展示数据时需要 使用map组件中的markers
  • 页面跳转用navigateTo进行操作

• 技巧总结
  • 尝试将经常用到的数据 存储在app.js文件 进行复用
    • 在其他文件通过const app = getApp() 来获取这个文件的内容
  • 编写一个公共接口文件， 这样以后能够很方便的在其他地方进行调用 如果这个接口需要 在其他地方也要调用的话
  • 前端 与后端是 弱耦合的 但是一定要 定义好数据接口，同时具有一定的扩展 便于后期功能开发
  • 将读取设备的信息 进行存储 这样就不用每次打开时都要进行读取了 提高运行速率。
    • wx.getStorage 以用户维度 为内存进行隔离 保证安全性， 内存 最大上限为10M； localStorages是永久存储的，可以调用APIj进行清除。
    • 使用自定义组件进行开发 减少重复工作
      • 但是要引入用到的文件 包括 wxml （include）wxss(@import “”;) 文件
    • 如何实现js 文件件 中的所有东西都被拆分出去
      • 采用 全部assign 的方法
    • 开发时注意各种细节 出错了先检查语法是否有错误 常见错误
      • 标点符号 ， ；
      • success 回调函数是否是写在function 大括号内部？
      • 函数是否加括号，
      • 对于数据是存在static静态数据还data 中比较好

• 小程序配置信息

• 云开发环境初始化步骤
  • 1 在app.js 文件 onLaunch 方法中添加初始化

// 初始化云开发环境

wx.cloud.init({

env:"wlq-1011"

})

• 2 在project.config.json配置cloud 文件夹F
  • "cloudfunctionRoot": "/cloud",
• 云函数的工作原理分析
  • 代码部署到微信服务器端，我们运行小程序时通过 向云函数传输参数， 云函数接受参数进行运算 后建结果传输到程序的过程
  • 这样做有什么好处
    • 减轻了本地运行代码的复杂度，使得本地代码主要是界面 和一些基本的逻辑时间代码，而比较消耗资源的计算服务 通过云服务器来进行，这就很丝滑的用到了云计算服务，提升了系统性能。
    • 方便管理所有函数，实现在不同的工程里面重复使用。
  • 云函数调用之后 return 的结果在result中
• openId标识唯一用户
  • 获取用户openid 通过这个标识我们便可以找到这个用户
  • 用处
    • 登录时获取 手机号 ， openid 得到用户信息

• 利用微信云平台搭建数据库并进行数据发送和接受请求
  • 通过云函数进行SQL操作，可以避免下面的情况发生
    • 注意数据库权限 造成的数据无法请求；通过云平台更改权限即可。
  • 直接使用云开发的数据库API获取数据只能获取20条 ， 并且 有权限限制（只有自己拥有绝对控制权）
    • 本质是云函数通过数据库api进行数据提取，，只是进行了中转。
  • 数据库的增删改查
    •  

• 云函数发短信 发邮件 发送模板消息