微信小程序

		近段时间学习了微信小程序，今天就来分享一些小程序的知识点。

（1）我们先要注册一个微信公众平台账号，然后再设置中，找到开发设置，拿到AppID。这个id我们在后面创建小程序项目会使用到的。

（2）然后我们可以 去网站中下载微信开发者工具来练习我们小程序项目。

然后我们就开始说一些知识

项目目录解构

目录结构图如下

.

├── app.js     # 小程序的逻辑文件
├── app.json   # 小程序的配置文件
├── app.wxss   # 全局公共样式文件
├── pages      # 存放小程序的各个页面
│   ├── index  # index页面
│   │   ├── index.js     # 页面逻辑
│   │   ├── index.wxml   # 页面结构
│   │   └── index.wxss   # 页面样式表
│   └── logs   # logs页面
│       ├── logs.js      # 页面逻辑
│       ├── logs.json    # 页面配置
│       ├── logs.wxml    # 页面结构
│       └── logs.wxss    # 页面样式表
├── project.config.json
└── utils
    └── util.js

根目录下有3个文件：app.js.app.json、app.wxss，小程序必须有着3个描述app的文件，并放在根目录下，这3个是应用程序级别的文件，与之平行的还有一个pages文件加，用来存放小程序的各个页面。

我们可以和web前端开发技术做个类比：
.wxml类似于html文件，用来编写页面的标签和骨架，但里面只能用小程序自己封装的组件；
.wxss类似于css文件，用来编写页面样式，只是把css文件换成wxss文件；
但是如果小程序来做适配单位不能用px了，要用：

• 相关单位

• pt逻辑分辨率（视觉单位，和屏幕尺寸有关系）；

• px物理分辨率（像素点）

• ppi：每英寸包含的像素点

• 小程序单位换算关系

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

.js文件类似于前端编程中的javascript文件，用来编写小程序的页面逻辑
.json文件用来配置页面的样式和行为。

小程序有导航栏设置

导航栏配置

• 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:关闭所有页面，打开到应用内的某个页面

小程序的事件

小程序给元素绑定事件不是我们在vue中用的@click类似的，而是 bindtap 和 catchtap:catch 会阻止冒泡。
通常catchtap:catch 会多一点，并且事件名不能带()些参数了，要在事件后面用data-参数:参数值的形式来写。

好的今天先分享到这里。