微信小程序资料整理

一、初识微信小程序

1、什么是微信小程序

Ⅰ-小程序历史

1. 2017 年度百度百科十大热词之一 
2. 微信小程序，简称小程序，英文名 Mini Program，是一种不需要下载安装即可使用的应用 
3. 小程序刚发布的时候要求压缩包的体积不能大于 1M,，否则无法通过，在2017年4月做了改进，由原来的1M提升到2M；
4. 2017年1月9日0点，万众瞩目的微信第一批小程序正式低调上线。

### Ⅱ-小程序的优势

1. 微信有海量⽤⼾，⽽且粘性很⾼，在微信⾥开发产品更容易触达⽤⼾；
2. 推⼴app 或公众号的成本太⾼。 
3. 开发适配成本低。
4. 容易⼩规模试错，然后快速迭代。
5. 跨平台。

## 2、小程序准备

### Ⅰ-环境准备

1. 安装微信小程序开发工具,建议安装稳定版进行开发

2. 注册小程序账号

3. 使用注册的appid进行使用，如果是测试号会限制很多功能

在官网登录成功后可以看到下面的界面，然后复制你的APPID,悄悄的保存起来，

Ⅱ-新建小程序流程

1. 打开开发者工具，第一次打开需要扫码登陆

2. 新建小程序项目

>
3. 填写项目信息

>
4. 新建成功
Ⅲ-微信开发者工具介绍

1）开发工具界面图解

详细的使⽤，可以查看官⽹:

2）开发工具的一些基本配置

1. 点击工具栏–>详情–>本地设置，除了默认勾选，需要勾选其他的几个如：增强编译、不校验合法域名…

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X98181HZ-1647600518351)(微信小程序学习笔记中的图片/微信开发工具的详情_本地配置注解图.png)]

2. 常用快捷键keyMap修改设置(本人习惯记录)：

1. ctrl+P：全局搜索

2. alt+/or shift+j:代码提示

Ⅳ-微信小程序名称或者原始id该如何找回？

问题描述：很久没有进行开发了，小程序的名称跟原始id都忘记了，找回需要先填写,如何解决

解决：首先查询自己的原始id,在这个网站能查询到自己的原始id，再通过这个原始id进行找回

---

# 二、小程序的基本目录结构与文件作用剖析

小程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服务。

⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

## 1、小程序文件结构和传统web对比

|                | 传统web    | 微信小程序 |
| -------------- | ---------- | ---------- |
| 项目骨架、结构 | HTML       | WXML       |
| 页面样式       | CSS        | WXSS       |
| 项目逻辑       | Javascript | Javascript |
| 配置           | 无         | JSON       |

1. 通过以上对⽐得出传统web是三层结构。⽽微信⼩程序是四层结构，多了⼀层配置.json

2. 当这几个文件在同一级目录下且命名相同(后缀不同),可以互相引用却不用导入

## 2、基本的项目目录

### Ⅰ-项目目录解释

1. 项目目录图解:

2. 以app开头的文件是应用程序级别的文件,更改一处全局生效。而页面pages的配置优先级高于全局配置(就近原则)
3. 小程序是允许你修改文件目录名的

3、小程序配置文件

⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的app.json 和 ⻚⾯⾃⼰的page.json

Ⅰ-全局配置app.json

1. app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部tab等。普通快速启动项⽬⾥边的 app.json 配置

2. 代码

json   {     "pages":[       "pages/index/index",       "pages/logs/logs"    ],     "window":{       "backgroundTextStyle":"light",       "navigationBarBackgroundColor": "#fff",       "navigationBarTitleText": "WeChat",       "navigationBarTextStyle":"black"    }   }

3. 字段的含义

1）pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序⻚⾯定义在哪个⽬录。

​  默认显示此字段中的第一项

​ 2）window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。

​ 3）完整的配置信息请参考 app.json配置

​ 4) tabBar-底部 tab 栏的表现:
![image-20210421102125607]

更多配置详细请看app配置文档

### Ⅱ-页面配置page.json

1. 这⾥的 page.json 其实⽤来表⽰⻚⾯⽬录下的 page.json 这类和⼩程序⻚⾯相关的配置。 开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允许下拉刷新等等。 ⻚⾯的配置只能设置 app.json 中部分 window 配置项的内容，⻚⾯中配置项会覆盖 app.json 的 window 中相同的配置项。
2. 常用配置属性列举:

| 属性                         | 类型     | 默认值  | 描述                                                         |
 | ---------------------------- | -------- | ------- | ------------------------------------------------------------ |
 | navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜⾊，如 #000000                                   |
 | navigationBarTextStyle       | String   | white   | 导航栏标题颜⾊，仅⽀持 black / white                         |
 | navigationBarTitleText       | String   |         | 导航栏标题⽂字内容                                           |
 | backgroundColor              | HexColor | #ffffff | 窗⼝的背景⾊                                                 |
 | backgroundTextStyle          | String   | dark    | 下拉loading的样式，仅⽀持 dark / light                     |
 | enablePullDownRefresh        | Boolean  | false   | 是否全局开启下拉刷新。 详⻅ (https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#onpulldownrefresh) |
 | onReachBottomDistance        | Number   | 50      | ⻚⾯上拉触底事件触发时距⻚⾯底部距离，单位为px。 详⻅ (https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#onreachbottom) |
 | disableScroll                | Boolean  | false   | 设置为 true 则⻚⾯整体不能上下滚动；只在⻚⾯配置中有效，⽆法在 app.json 中设置该项 |
视图层详解

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language) 用于描述页面的结构。

WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXSS(WeiXin Style Sheet) 用于描述页面的样式。

组件(Component)是视图的基本组成单元。

该部分将截取官方文档并加以注解

1、WXSS样式文件详解

1. WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

2. WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

3. 与 CSS 相比，WXSS 扩展的特性有：
      1. 响应式⻓度单位:即尺寸单位 -->rpx
      2. 样式导入

4. 注意:

当页面文件在同一级目录下且命名相同(后缀不同),可以互相引用却不用导入

### Ⅰ-尺寸单位

1. rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

| 设备         | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
 | :----------- | :----------------------- | :----------------------- |
 | iPhone5      | 1rpx = 0.42px            | 1px = 2.34rpx            |
 | iPhone6      | 1rpx = 0.5px             | 1px = 2rpx               |
 | iPhone6 Plus | 1rpx = 0.552px           | 1px = 1.81rpx            |

2. 建议与注意点:

1. 开发微信小程序时推荐设计师可以用iPhone6作为视觉稿的标准–>即只有在iPhone6标准中才可以一比二换算,更方便
      2. 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况

列表渲染
 1) wx:for

1. 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

2. 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

3. 使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名：

jsx          {{idx}}: {{itemName.message}}    
当 wx:for 的值为字符串时，会将字符串解析成字符串数组

  {{item}}

等同于


  {{item}}

② 花括号和引号之间如果有空格，将最终被解析成为字符串

  {{item}}

等同于


  {{item}}

4. wx:for 也可以嵌套，下边是一个九九乘法表

jsx                            {{i}} * {{j}} = {{i * j}}                  
 wx:if

1. 在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

jsx     True 

2. 也可以用 wx:elif 和 wx:else 来添加一个 else 块:

jsx     5}}"> 1      2}}"> 2      3 
wx:if vs hidden

1. 因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

2. 同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

3. 一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
setData](https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html)–>数据更新

1. setData 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。

2. 小程序的视图层目前使用 WebView 作为渲染载体，而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上，WebView 和 JavascriptCore 都是独立的模块，并不具备数据直接共享的通道。当前，视图层和逻辑层的数据传输，实际上通过两边提供的 evaluateJavascript 所实现。即用户传输的数据，①需要将其转换为字符串形式传递，② 同时把转换后的数据内容拼接成一份 JS 脚本，③再通过执行 JS 脚本的形式传递到两边独立环境。
3. 而 evaluateJavascript 的执行会受很多方面的影响，数据到达视图层并不是实时的

1) 简单使用

setData可以直接将数据加入data中;如果在data中已经有该值,则修改它有着创建+更新功能  但正常是用来更新

Page({
    data: {posts: [],test: "测试数据",flag: true},
    //更新
   this.setData({posts: content})
})

2) 常见的 setData 操作错误

① 频繁的去 setData

在我们分析过的一些案例里，部分小程序会非常频繁（毫秒级）的去setData，其导致了两个后果：

- Android 下用户在滑动时会感觉到卡顿，操作反馈延迟严重，因为 JS 线程一直在编译执行渲染，未能及时将用户操作事件传递到逻辑层，逻辑层亦无法及时将操作处理结果及时传递到视图层；
- 渲染有出现延时，由于 WebView 的 JS 线程一直处于忙碌状态，逻辑层到页面层的通信耗时上升，视图层收到的数据消息时距离发出时间已经过去了几百毫秒，渲染的结果并不实时；

##### ② 每次 setData 都传递大量新数据

由setData的底层实现可知，我们的数据传输实际是一次 evaluateJavascript 脚本过程，当数据量过大时会增加脚本的编译执行时间，占用 WebView JS 线程，

##### ③ 后台态页面进行 setData

当页面进入后台态（用户不可见），不应该继续去进行setData，后台态页面的渲染用户是无法感受的，另外后台态页面去setData也会抢占前台页面的执行

wxml:书写页面结构 类似于之前的html。称为组件
https://developers.weixin.qq.com/miniprogram/dev/component/ 
wxss:书写页面样式。和之前的css基本一样
json配置文件
js书写动态效果
–>

请上传头像

容器

按钮 view{     /* 快级标签独占一行，行内标签宽高由内容决定 */     background: pink; } button{     background:lime; } .box{     /* rpx是一个相对单位  750rpx和屏幕一样宽 */     width:750rpx;     height: 200rpx;     /* wxss里面的背景图片不能使用本地图片。     可以使用网络图片，     还可以使用base64位图片https://tool.css-js.com/base64.html */

首页

我的
// pages/my/my.js
Page({

/**
   * 页面的初始数据
   */
  data: {
    // 变量名:值
    zsh:‘hello 小程序’,
    src:"…/…/images/aa.gif",
    num:10,
    txt:‘one’,
    list:[‘xxx’,‘aaa’,‘bbb’,‘cccc’]
  },
  // 方法可以直接定义
  // 方法名:function(){
  // }
  fn:function(){
    // 获取数据 this.data.变量名
    // 修改数据
    // this.setData({
    //   变量名:值
    // })
    // console.log(111)
  },
  toggle:function(e){
    // e.target.dataset.wxml参数名
    console.log(e.target.dataset.id)
  },
  change:function(){
    if(this.data.src==’…/…/images/aa.gif’){
      this.setData({
        src:"…/…/images/Bane 1.png"
      })
    }else{
      this.setData({
        src:"…/…/images/aa.gif"
      })
    }
  },
  add:function(){
    var t=this.data.num+1
    this.setData({
      num:t
    })
  },
  sub:function(){
    var t=this.data.num-1
    this.setData({
      num:t
    })
  },

/**t
   * 生命周期函数–监听页面加载
   */
  onLoad: function (options) {

},

/**
   * 生命周期函数–监听页面初次渲染完成
   */
  onReady: function () {

},

/**
   * 生命周期函数–监听页面显示
   */
  onShow: function () {

},

/**
   * 生命周期函数–监听页面隐藏
   */
  onHide: function () {

},

/**
   * 生命周期函数–监听页面卸载
   */
  onUnload: function () {

},

/**
   * 页面相关事件处理函数–监听用户下拉动作
   */
  onPullDownRefresh: function () {

},

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

},

/**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

}
})

按钮

{{item}}-{{index}}
微信云开发
Music

/* pages/music/music.wxss /
image{
  width:300rpx;
  margin-left: 225rpx;
  / 使用动画 /
  animation: move 1s infinite linear;
}
.paused{
  / 暂停动画 */
  animation-play-state: paused;
}

/* 定义动画 */
@keyframes move{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
// 创建音频
const innerAudioContext = wx.createInnerAudioContext()
// 播放地址
innerAudioContext.src=‘cloud://zsh-gmx9p.7a73-zsh-gmx9p-1257218395/aa.m4a’
// 自动播放
// innerAudioContext.autoplay = true
// 循环播放
innerAudioContext.loop=true
Page({

/**
   * 页面的初始数据
   */
  data: {
    num:1
  },
  change:function(){
    if(this.data.num==0){
      this.setData({
        num:1
      })
      // 播放音乐
      innerAudioContext.play()
    }else{
      this.setData({
        num:0
      })
      // 暂停音乐
      innerAudioContext.pause()
    }
 },
Video

发布弹幕                   获取位置     移动位置     移动标注     缩放视野展示所有经纬度    获取数据 data: {         danmu:[             {                 text:'吐槽',                 color:'pink',                 time:1             },             {                 text:'hahah',                 color:'blue',                 time:2             },             {                 text:'今天才周二吖',                 color:'blue',                 time:1             }         ],         con:'',     getcon:function(e){         console.log(e.detail.value)         this.setData({             con:e.detail.value         })     },     send:function(){         // 实时发送弹幕         this.video.sendDanmu//VideoContext.sendDanmu(Object data)小程序插件：支持发送弹幕 ({             text:this.data.con,             color:'pink'         })     },     /**      * 生命周期函数--监听页面初次渲染完成      */     onReady: function () {         // 获取音频         this.video=wx.createVideoContext('myVideo')         this.mapCtx = wx.createMapContext('myMap')     },     getCenterLocation: function () {         this.mapCtx.getCenterLocation({           success: function(res){             console.log(res.longitude)             console.log(res.latitude)           }         })       },  onReady: function () {         // 获取音频         this.video=wx.createVideoContext('myVideo')  }, //地图js     moveToLocation: function () {         this.mapCtx.moveToLocation()       },       translateMarker: function() {         this.mapCtx.translateMarker({           markerId: 1,           autoRotate: true,           duration: 1000,           destination: {             latitude:23.10229,             longitude:113.3345211,           },           animationEnd() {             console.log('animation end')           }         })       },       includePoints: function() {         this.mapCtx.includePoints({           padding: [10],           points: [{             latitude:23.10229,             longitude:113.3345211,           }, {             latitude:23.00229,             longitude:113.3345211,           }]         })       }, //数据库查询 增加数据 查询数据 // pages/data/data.js Page({

/**
   * 页面的初始数据
   */
  data: {
    user:’’,
    pass:’’
  },
  add:function(){
    // 初始化
    const db = wx.cloud.database()
    // collection集合
    db.collection(‘student’).add({
      // data 字段表示需新增的 JSON 数据
      data: {
        // 获取值 this.data.变量名
        user:this.data.user,
        pass:this.data.pass
      },
      success: function(res) {
        // res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
        console.log(res)
      }
    })
  },
  getuser:function(e){
    // 设置值  e.detail.value存储的是表单元素的值
    this.setData({
      user:e.detail.value
    })
  },
  getpass:function(e){
    // 设置值
    this.setData({
      pass:e.detail.value
    })
  },

select:function(){
    // 初始化
    const db = wx.cloud.database()
    // 查询语句
    db.collection(‘student’).where({
      user:‘zsh’,
      pass:‘111’
    })
    .get({
      success: function(res) {
        console.log(res.data)
      }
    })
  },