微信小程序

一、什么是小程序？

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

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

二、 小程序优点

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

三、找官网的顺序：浏览器搜索微信公众号官网，点击扫码登录进入微信开放文档

3-1初始化项目：

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

四、小程序页面

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

局部配置的优先级高于全局配置的优先级，所以局部配置会全局配置覆盖掉

全局配置要用到的一些属性

entryPagePath ：小程序默认启动首页；
Pages：页面路径列表；

"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/user/user"
  ],
window：全局默认窗口的样式；
 "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#ff5555",
    "navigationBarTitleText": "微信",
    "navigationBarTextStyle":"black"
  },

tabBar ：底部tab栏的表现；

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

五、小程序单位

• 相关单位

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

• 小程序单位换算关系

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

六、类似于客服按钮：

 <button open-type="contact" bindcontact="myfn"> 点我 </button>

open-type：微信开放能力；
bindcontact：客服消息回调，open-type="contact"时有效

七、模板引入

1.创建一个template的文件夹，里面建一个wxml文件

<!-- name:给当前模板添加标记 -->
<template name="aa">
  <view>我的模板</view>
</template>

2.在当前文件内引入获取

  <import src="/pages/template/aa.wxml"/>
  <!-- is：根据模板的name值，来显示 -->
  <template is="aa"></template>
<!-- 获取模板之外的内容 -->
    <inclube  src="/pages/template/aa.wxml" />

八、点击获取

<button size="mini" type="primary"  data-id="3" bind:tap="fn">点击触发事件</button>
  {{message}}

data: {
    message:'我是来打酱油的'
  },
 fn(e){
  // 1. 参数的获取方式
  //  console.log(e)
  //  console.log(e.currentTarget.dataset.id)
  //2. 文件内数据获取方式
  // console.log(this)
  this.setData({
    message:'修改的数据',
    // 条件渲染
    show:!this.data.show
  })
 },
 

九、网络数据请求

  <button size="mini" type="primary" bind:tap="getData"> 点击获取网络数据 </button>

//  获取网络数据
// 小程序没有跨域问题（https）加密地域名，在详情里勾选不检验合法域名
// 跨域的起源是在浏览器的同源策略
getData(){
  wx.request({
  url: 'http://localhost:8989/getList',   
  success (res) {
    console.log(res.data)
  }
})
},