小程序

小程序与web开发对比分析

注册小程序开发账号 安装开发者工具等

1. 在使用开发工具的过程中 注意 项目名称是唯一的 包括 代码片段 公众号 小游戏

对于初始化的小程序 关注app.json app.js 以及 pages文件夹

app.json 全局的页面配置文件 ：主要负责定义所有页面的引用路径 和 基本的页面属性 配置

1. 添加属性tabBar 可以显示底部固定导航栏：注意list字段中的子项路径（pagePath） 在pages属性中要置顶，必须写在非tabBar页面路径之前 否则tab会显示异常(不显示)
2. 代码中存在注释 会引致语法错误 导致页面报错 谨慎使用
3. 每个属性的结尾 不能有任何符号

app.js 小程序项目入口文件 项目初始化init

pages文件夹 内放置对应的 单一页面（每个页面文件都基本需要配置 .js .wxml .wxss. .json)

单一页面的生成

• .js :处理逻辑业务 与web开发类似
• .wxml :具有模板数据绑定的功能 类似 Vue
• .wxss :等同css
• .json :此处添加配置会 将全局中相同的配置覆盖

1. .js : Page({}) 页面实例必须正确初始化 否则页面会报错

   Page({
       data:{
   
           },
       /**
        * 生命周期函数--监听页面加载
        */
       onLoad: function (options) {
           
       }
   
       })

2. .json : 同上

   {
   
   }

---

与web开发中的html js css 对比

由于小程序的界面空间有限且运行环境非浏览器 而是在微信app内置环境中 有以下地方需要注意:

文档内容较全 初学者 第一天可着重阅读以下整理过后的文档

• wxml: 小程序页面的结构 页面导航 路由api 界面交互：例如消息提示框 底部操作菜单等

• .js: 事件

• wxss: wxss

---

进入小程序项目

项目拆解

combat-okr项目 文件内应该分为 sever（服务端即Koa框架） client（客户端 即小程序项目）开发时着重各自的开发环境 初学者 避免混淆

1.小程序登录

本次登录功能分为三部分 客户端（小程序项目） 本地服务端（koa) 微信服务端
登录就是如何处理好 req res 请求和响应的数据接发
区分这两者在不同的服务端的不同语法是关键

三者存在以下关系

客户端 <=> 微信服务端 ／／code 的获取

客户端 <=> 本地服务器 <=> 微信服务端 ／／

1. code : 由客服端直接向微信服务端 发起请求所得（wx.login())
2. 获取openId等数据: 由本地服作为中转，向第三方服务器 发起请求
3. 操作数据

主要讲解 数据在 三者中的 获取方式 存储方式

客户端： 这里是小程序项目的文件 为实际操作的目录
主要是运用到小程序的API（请求语法/存取语法）

本地服： koa的中 ctx的理解和其API

关于客户端请求 wx.login()&& wx.request 的分析

wx.login({
  success(res) {
    if (res.code) {
      // 发起网络请求
      wx.request({
        url: 'https://test.com/onLogin',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

• 要有一个强硬的逻辑：发起请求 就必须 想到 响应

• 去查找 发起者 和 接收者 的语法， 如上面是 小程序客户端向 本地服务（如koa)发起的请求

  那么接下来 就是想 本地服 如何 响应客户端的请求(数据怎么传递)

• 发请求的目的是要拿到什么数据？

• 本地服 在满足客服端的请求 是否需要向第三方或者 数据库 ？

带着以上的思路,找出服务端之间的请求和响应 的数据传递所运用的语法 就能很好的处理各种类型的客户端（前台） 服务端（后台） 之间的交互工作

目前用作前台类型有： 原生（html） vue 小程序

充当服务端角色类型有： 原生（ajax:是一种写法） express koa.

注意事项

1. 小程序的数据库表中字段命名：user-id user-name 在小程序的列表渲染中 会读取不到改字段的属性 用userID 取代

数据库操作和页面渲染数据

杂记：

1. client 请求类型为（Get 或 Put )，通过 API 访问serever ，server (Koa框架 )通过ctx.request.body 获取到 client中 data字段中定义的对象（键值对）
2. client 请求类型为（Post )，通过 API 访问serever ，server (Koa框架 )：需要引入第三方库koa-bodyparser ctx.request.body 获取到 client中 data字段中定义的对象（键值对）
3. 交互逻辑简述 稍后补充
   1. Client view中