初识微信小程序

0.拓展

1. 在文件夹指定目录地址栏中输入cmd即可启动DOSS窗口在并跳转到指定路径。

1.储备知识

1. Flex布局（弹性布局）

   • display:flex

2. 像素的概念

   • 物理像素&设备独立像素&CSS像素
   • dpr(设备像素比：物理像素/设备独立像素=dpr) & DPI（一英寸屏上的像素点数） & PPI（早期打印机在单位面积上打印的墨点数）

3. 移动端适配方案

   • viewport适配

     • 需求：将980px的页面完全显示在手机屏幕上且没有滚动条。
     • 实现：<meta name="viewport" content="width=device-width,initial-scale=1.0">

   • rem适配

     • 需求：一套设计稿的内容在不同的机型（屏幕大小不一样）呈现的效果一致，根据屏幕尺寸的变化，页面中的内容也发生变化。
     • 实现：第三方库 -- lib-flexible+px2rem-loader

4. 小程序适配方案：rpx(responsive pixel)

   • 规定任何屏幕下宽度为 750rpx
   • 小程序会根据屏幕宽度不同自动计算rpx大小。
   • IPhone 6 (width:375px) ：1rpx = 1 物理像素 = 0.5px
   • calc 计算属性与rpx

2. 特点

1. 组件化开发（具定特定功能效果的代码集合）
   • 组件跟页面之间的关系（页面包含组件，一个完整的页面由多个组件结合而成）
2. 开发者工具黑科技
   • 真机调试
   • 切后台：模拟手机返回桌面将当前小程序切换到后台中。
3. 注意事项
   • pages 默认没有高度，可在全局样式中添加高度为 100%
   • this 是当前页面的实例对象

3.微信小程序基础

3.1数据绑定

1. data 中初始化数据，this.setData修改数据（修改数据的行为始终是同步的）
2. 数据流：单项（Model-->View）

3.2 数据绑定

• 数据劫持代理

• 数据劫持代理底层使用JS的Object.definproperty方法实现

  let data = {
      username: null,
      age: null
  }
  let _this = {};
  for (const item in data) {
      Object.defineProperty(_this, item, {
          // get 用来获取拓展属性的值。
          get() {
              // console.log(data[item]);
              return data[item];
          },
          // set 用来监视拓展属性的，只要修改就会调用。
          set(newVal){
              // _this.username = newVal; // 在set方法中修改当前拓展属性的值会出现死循环。
              data[item] = newVal;
          }
      })
  }
  console.log(_this); // {}
  _this.username = "Frank"
  console.log(_this.username); //
  

3.4 事件绑定

• 冒泡事件
  • 当一个事件被触发之后，该事件会向父节点传递。
  • bindTap
• 非冒泡事件
  • 当一个事件被触发之后，该事件不会向父节点传递。
  • catchTap
• 事件对应的处理函数与data/生命周期函数平级。

3.5 路由跳转

• wx.navigateTo(object,object)
• url 填写相对路径 加/

3.6 阿里云矢量图标库

• 使用cdn 链接样式/复制样式到本地

3.7 css 控制单/多行文本溢出省略

.class {
    // 单行文本溢出隐藏
    display:block;
    white-space:nowrap;
    overflow:hidden; // 作用于块级元素
    text-overflow:ellipsis;
    // 多行文本溢出隐藏
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical; // 设置对齐模式
    -webkit-line-clamp:2; // 行数
}

3.8 接口测试

• get请求可以直接使用浏览器请求
• postman接口请求工具

初识微信小程序

原文：https://www.cnblogs.com/FranK-0009/p/15017661.html