微信小程序

---

堪称最详细基础微信小程序的重点笔记

---

微信小程序

• 工具

  • 微信开发者工具
  • 微信小程序账号

• 前置知识

  • html、css基础知识
  • js基础知识

• 小程序简介

• 小程序环境

• 小程序页面

• 事件系统

• 模板引用

• 网络请求

• 新闻列表案例

• 掌握小程序环境搭建

• 了解组件及自定义组件

• 会使用模板引用及组件

• 会在小程序使用网络请求

什么是小程序？

​ ”触手可及“、”即用即走“，无需下载安装，不用关心安装过多应用；

• 整个小程序所有分包大小不超过 8M
• 单个分包/主包大小不能超过 2M

小程序优点

• 平台封闭，上手简单
• 跨平台运行
• 使用方便

小程序环境

注册小程序

登录小程序

小程序开发者工具

小程序文档

初始化项目

• 新建项目
  • 扫码登录
• 开发工具
  • 切后台
  • sensor 用来调试地理位置调式重力感应的api
• 目录结构
  • app.json
    • 全局的公共配置:是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
  • app.wxss
    • 小程序公共样式表
  • app.js
    • 小程序逻辑
  • project.config.json
    • 记录开发者工具配置信息例如界面颜色、编译配置等等
  • sitemap.json
    • 配置小程序页面是否被微信索引；

###小程序页面

• js ：页面逻辑
• wxml：页面结构
• json：页面配置
• wxss： 页面样式

小程序单位

​

• 相关单位

  • pt逻辑分辨率（视觉单位，和屏幕尺寸有关系）；
  • px物理分辨率（像素点）
  • ppi：每英寸包含的像素点

• 小程序单位换算关系

  • iphone6下1px=1rpx=0.5pt（rpx会在不同设备下转换、而px不会）；

组件

• image组件

• button组件

• https://openai.weixin.qq.com/

• 文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html

导航栏配置

• app.json

  • pages：配置小程序页面路径
  • window 配置顶部导航栏 文档地址

    {
      "window": {
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "微信接口功能演示",
        "backgroundColor": "#eeeeee",
        "backgroundTextStyle": "light"
      }
    }
  

  • tabbar配置底部导航栏

      "tabBar": {
        "list": [
          {
            "pagePath": "pages/index/index",
            "text": "首页"
          },
          {
            "pagePath": "pages/logs/logs",
            "text": "日志"
          }
        ]
      },
    

• 路由跳转

  • wx.switchTap:跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
  • wx.navigateTo:保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
  • wx.redirectTo:关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
  • wx.reLaunch:关闭所有页面，打开到应用内的某个页面

事件绑定

• bindtap 和 catchtap:catch 会阻止冒泡
  • dataset 带参数
  • 事件中布尔值

模板引用

提高模板复用性；

• 定义模板

  <template name="A">
    <text> A template </text>
  </template>
  

• 引入模板

  • Import 可以在该文件中使用目标文件定义的template

  <import src="/pages/templates/a.wxml" />
   <template is="a"></template>
  

  • include 可以将目标文件除了 template 外的整个代码引入，相当于是拷贝到 include 位置

<include src="/pages/templates/b.wxml" />

网络请求

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

新闻列表

• 获取新闻列表
• 上拉加载更多
• 新闻列表详细

练习：1.完善新闻详细页面 2.上拉加载更多；

总结

• 小程序简介
• 小程序环境
• 小程序页面
• 事件系统
• 模板引用
• 网络请求

下节预告

小程序基础二