# 微信小程序开发基础 {#微信小程序开发基础}

本文讲述微信小程序的开发基础。

建议：使用其他工具作为代码编辑器，使用微信开发着工具作为预览、编译工具。
同时要给第三方开发工具(如vscode)安装小程序开发插件，便于代码提示。

# 小程序开发者工具 {#小程序开发者工具}

主要设置：设置外观可以开发一个完整的编译模式：通过配置编译模式，默认在预览页面预览指定页面。预览和真机调试：切后台：模拟小程序中页面的切换清缓存：用到个人信息或本地存储时会用到。微信账号详情：可以修改appID 测试基础库：需要指定内核版本不校验合法域名：要勾选上，否则无法请求外部的接口弱网：支持模拟3G、4G、wifi等网络环境。页面路径：在模拟器的下方可以看到页面的路径和参数资源管理器：代码编辑器：调试器：类似于谷歌开发者工具

# 配置node环境 {#配置node环境}

若想编译或预览小程序，那么必须事先配置好node环境。
若开发者工具所在的系统安装了NVM(node多版本管理工具)，那么需要做额外配置，开发者工具才能识别到nvm下的node环境。
修改工程根目录下的project.config.json，修改配置项beforeCompile、beforePreview、beforeUpload。示例如下：

  "scripts": {
    "beforeCompile": "source ~/.oh-my-zsh/lib/wangshibiao.zsh && npm run tsc",
    "beforePreview": "source ~/.oh-my-zsh/lib/wangshibiao.zsh && npm run tsc",
    "beforeUpload": "source ~/.oh-my-zsh/lib/wangshibiao.zsh && npm run tsc"
  },

您根据实际的情况改为自己的配置即可。

WXML：类似于html WXSS：类似于css pages: 存放所有的页面代码 app.js：入口文件 sitemap: 只需要在发布时使用到。

# 小程序全局配置文件 {#小程序全局配置文件}

app.json

建议在开发者工具中编辑配置，因为有智能提示。

# pages配置 {#pages配置}

定义了有哪些页面
注意不要写后缀名
自动生成一个页面相关文件
在开发者工具中，pages配置下增加一行，然后刷新即可。
设置"打开开发者工具时，默认打开某页面"
将对应页面的路由配置挪到首行。

# windows配置 {#windows配置}

nagvigationBar...: 导航栏配置，可以设置颜色、标题、标题的颜色。

# tabbar配置 {#tabbar配置}

用于配置小程序底部的菜单。示例如下:

  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "pages/icons/1.jpg",
      "selectedIconPath": "pages/icons/1_selected.jpg"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "启动日志",
      "iconPath": "pages/icons/2.jpg",
      "selectedIconPath": "pages/icons/2_selected.jpg"
    }]
  }

# 页面配置 {#页面配置}

可以针对每个页面配置导航栏、上拉下拉刷新等。

# sitemap配置 {#sitemap配置}

用于微信搜索。

# 数据绑定 {#数据绑定}

text相当于span标签行内元素不会换行。
view相当于div标签块级元素会换行

.js的示例：

// pages/demo/demo1.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    "username": "王世彪"
  }
})

数据定义在Page.data下。

.wxml的示例：

<!--pages/demo/demo1.wxml-->
<view>{{username}}</view>

使用来做渲染。

# 运算(表达式) {#运算-表达式}

支持在{{}}中使用表达式(如数字加减、字符串拼接、三元运算)。

# 数组或对象渲染 {#数组或对象渲染}

wx:for支持对数组或对象做渲染。
wx:key用于绑定item的唯一属性，用于提高性能。
wx:key="*this",标识数组是一个普通数组， *this表示是循环项。
当出现嵌套循环时，注意绑定的名称不要重名。
若只有一层循环的话，wx:for-item和wx:for-index可以不写，因为小程序已默认设置。

# block标签 {#block标签}

占位符标签
页面渲染时会把该标签去掉。

# 条件渲染 {#条件渲染}

hidden
当标签频繁切换显示时，优先使用hidden
原理：通过添加样式的方式来切换显示。
不要和display样式混合使用，否则会被覆盖。
wx:if
当标签不频繁切换显示时，优先使用wx:if
原理：把标签从页面结构中移除掉。

# 事件绑定 {#事件绑定}

绑定输入框
bindinput
从事件源对象中找到对应的变量：e.detail.value 示例:

this.setData({ num: e.detail.value })
绑定点击事件
bindtap
无法再小程序当中的事件中直接传参通过自定义属性传递参数，然后在事件处理中从事件源获取自定义属性。
示例如下：

获取自定义属性operation const operation = e.currentTarget.dataset.operation;

# 样式 {#样式}

# 单位 {#单位}

rpx，规定屏幕宽为750rpx。使得宽高自适应。
小程序中不需要主动引入样式文件。
需要把设计稿中的px转换为rpx单位。

利用calc属性,可以在wxss中使用表达式,示例如下:

width: calc(750rpx * 100 / 375)

# 样式导入 {#样式导入}

使用@import导入样式表。
只支持相对路径。

# 样式选择器 {#样式选择器}

不支持通配符*。
默认不支持less,但可以通过在vscode中添加插件即可实现。
less也支持导入。

# 组件 {#组件}

常见组件：view、text、rich-text、button、image、navigator、icon、swiper、radio、checkbox。

view
替换原来的div标签
text
文本标签
只能嵌套text
长按文字可以复制（只有该标签有这个功能）:添加属性selectable
可以对空格、回车进行编码
image
腾讯对小程序的大小有要求，不能超过2M, 所以图片要使用网络图片。
image组件有默认宽高：宽320px,高240px
mode参数用来控制图片内容如何和image标签的宽和高做适应。
支持懒加载：添加属性lazy-load
swiper
用于轮播。
nagigator
导航组件。
支持绝对路径和相对路径。
是块级元素，默认会换行，可以直接加宽度和高度。
target: 跳转到自己或其他小程序。
rich-text
通过nodes属性来实现

标签字符串(常用)
对象数组

button
button除了拥有按钮的功能外，还有如下开放能力：

open-type:
1. contact 直接打开客服对话功能需要在微信小程序的后台配置只能够通过真机调试来打开
2. share 转发当前的小程序到微信朋友中不能把小程序分享到朋友圈
3. getPhoneNumber 获取当前用户的手机号码信息结合一个事件来使用只有企业版的小程序账号有权限获取用户的收集号码 1> 绑定一个事件bindgetphonenumber 2> 在事件的回调函数中，通过参数来获取信息 3> 获取到的信息，已经加密过了需要用户自己搭建小程序的后台服务器，在后台服务器中进行解析手机号码，返回到小程序中
4. getUserInfo 获取当前用户的个人信息 1> 使用方法类似获取用户的手机号码 2> 可以直接获取未加密的字段
5. launchApp 在小程序中直接打开app
  1> 需要在app中通过app的某个链接打开小程序 2> 在小程序中再通过这个功能重新打开app
6. openSetting 打开小程序内置的授权页面 1> 授权页面中只会出现用户曾经点击过的权限
7. feekback 打开小程序内置的意见反馈页面只能够通过真机调试来打开
icon图标
radio
需要和radio-group搭配使用
checkbox
需要和checkbox-group搭配使用