微信小程序基础知识学习（一）

迈不过友情╰ 2021-09-13 15:50 546阅读 0赞

## 1.小程序简介 ##

> 小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

## 2.使用 JS-SDK 调用图片预览组件 ##

wx.previewImage({ 
      current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
      urls: [ // 所有图片的URL列表，数组格式
        'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
      ],
      success: function(res) { 
        console.log(res)
      }
    })

注：JS-SDK是对之前的 WeixinJSBridge 的一个包装，以及新能力的释放，并且由对内开放转为了对所有开发者开放，JS-SDK 解决了移动网页能力不足的问题，通过暴露微信的接口使得 Web 开发者能够拥有更多的能力，之后设计了一个 JS-SDK 的增强版本，其中有一个重要的功能，称之为“微信 Web 资源离线存储”。

## 3.小程序与普通网页开发的区别 ##

> 1.小程序的主要开发语言是 JavaScript  
> 2.网页开发者需要面对的环境是各式各样的浏览器，而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具  
> 3。网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。小程序的开发则有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程方可完成。>

## 4.安装 ##

**1.进入小程序公众号注册页申请账号**  
可以管理小程序的权限，查看数据报表，发布小程序等操作。  
登录小程序后台 ，可以在菜单 “开发”-“开发设置” 看到小程序的 AppID（小程序的 AppID 相当于小程序平台的一个身份证） 。  
**2.安装开发工具**：  
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html  
![在这里插入图片描述][20200228144224764.png]  
新建项目时，填入小程序的AppId,勾选“不使用云服务”， （注意: 你要选择一个空的目录才可以创建项目）

## 5.小程序代码构成 ##

1.json 后缀的 JSON 配置文件  
2.wxml 后缀的 WXML 模板文件  
3.wxss 后缀的 WXSS 样式文件  
4.js 后缀的 JS 脚本逻辑文件  
![在这里插入图片描述][20200228145854624.png]

## 6.JSON 配置 ##

**小程序配置 app.json**

> app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]

**工具配置 project.config.json**

> 当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

**页面配置 page.json**

> 这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json，让开发者可以独立定义每个页面的一些属性，例如顶部颜色、是否允许下拉刷新等等。

**JSON配置的一些注意事项。**

> 1.SON文件都是被包裹在一个大括号中 \{\}，通过key-value的方式来表达数据。  
> 2.JSON的Key必须包裹在一个双引号中  
> 3.JSON的值只能是以下几种数据格式  
> （1）数字，包含浮点数和整数  
> （2）字符串，需要包裹在双引号中  
> （3）Bool值，true 或者 false  
> （4）数组，需要包裹在方括号中 \[\]  
> （5）对象，需要包裹在大括号中 \{\}  
> （6）Null  
> 4. JSON 文件中无法使用注释

## 7.WXML 模板 ##

WXML 充当的就是类似 HTML 的角色，和 HTML 非常相似，WXML 由标签、属性等等构成。

**WXML和HTML的不同之处：**  
1.标签名字有点不一样  
小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者  
包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。  
2.多了一些 wx:if 这样的属性以及 \{ \{ \}\} 这样的表达式  
通过 \{ \{ \}\} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

如果需要把一个 Hello World 的字符串显示在界面上。
    
    WXML 是这么写 :
    <text>{ { msg}}</text>
    
    JS 只需要管理状态即可:
    this.setData({  msg: "Hello World" })

## 8.WXSS 样式(WXSS 具有 CSS 大部分的特性) ##

1.新增了尺寸单位。  
WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼(注：由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。)  
2.提供了全局的样式和局部样式。  
app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。  
3.此外 WXSS 仅支持部分 CSS 选择器  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 1]

## 9.JS 逻辑交互 ##

<view>{ {  msg }}</view>
    <button bindtap="clickMe">点击我</button>
    
    点击 button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"，
    于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边
    声明了 clickMe 方法来响应这次点击操作：
    
    Page({ 
      clickMe: function() { 
        this.setData({  msg: "Hello World" })
      }
    })

## 10.渲染层和逻辑层 ##

**小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。**

> 小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端做中转，逻辑层发送网络请求也经由Native转发

## 11.API ##

要获取用户的地理位置时，只需要：
    
    wx.getLocation({ 
      type: 'wgs84',
      success: (res) => { 
        var latitude = res.latitude // 纬度
        var longitude = res.longitude // 经度
      }
    })
    调用微信扫一扫能力，只需要：
    
    wx.scanCode({ 
      success: (res) => { 
        console.log(res)
      }
    })

注：多数 API 的回调都是异步，需要处理好代码逻辑的异步问题

## 12.事件监听 API ##

以 on 开头的 API 用来监听某个事件是否触发，如：wx.onSocketOpen，wx.onCompassChange 等。
    wx.onCompassChange(function (res) { 
      console.log(res.direction)
    })

**同步 API**

以 Sync 结尾的 API 都是同步 API， 如 wx.setStorageSync，wx.getSystemInfoSync 等。
    此外，也有一些其他的同步 API，如 wx.createWorker，wx.getBackgroundAudioManager 等
    try { 
      wx.setStorageSync('key', 'value')
    } catch (e) { 
      console.error(e)
    }

**异步 API**  
大多数 API 都是异步 API，如 wx.request，wx.login 等

[20200228144224764.png]: /images/20210913/3e71b32648d1410aa7c74f2ad4511c0a.png
[20200228145854624.png]: /images/20210913/252f526e8f42443d8aa903da23892dfe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]: /images/20210913/80a18e48da604141a08b3135e1b55c96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 1]: /images/20210913/ea57cc3e9a0a44cbb0f07c19fc6cca01.png