微信小程序基础知识

微信公众平台

微信公众平台网址：http://mp.weixin.qq.com

微信公众平台主要包括：服务号，订阅号，小程序。

小结

小程序相对于 app，网页的优势。

小程序相对于 app 更加轻量，传播更方便。

小程序相对于 网页 体验更好，权限更多。

小程序文件结构

目标

学习小程序的4大结构。

概述

网页三大标准：结构 html，样式 css，脚本 js。

小程序文件结构主要分为四大标准，分别是 wxml ,wxss, js, json。

网页三大标准，小程序四大标准。

JSON 配置项作用。

JSON 注意事项

小程序的 JSON 配置项是非常严格的，主要注意以下几点：

1. 键名称必须用双引号，字符串数据也必须用双引号。

2. 不能书写注释，会报错。

3. 不能有多余的逗号。

页面配置

"pages" 代表页面配置项，主要的功能用于管理小程序所有页面，没有在 pages 添加的页面小程序无法访问到。

"pages": [
    "页面路径1",
    "页面路径2"
]

窗口配置

"window" 代表窗口表现配置项。

 "window": {
      // 导航栏背景颜色
    "navigationBarBackgroundColor": "#f00",
      // 导航栏的标题文字
    "navigationBarTitleText": "黑马",
      // 导航栏的文件颜色
    "navigationBarTextStyle": "white",
      // 下拉后的背景颜色
    "backgroundColor": "#f2f2f2",
      // 下拉后的加载小圆点的颜色
    "backgroundTextStyle": "dark",
      // 开启页面下拉刷新功能
    "enablePullDownRefresh": true
  },

补充： 自定义导航栏 "navigationStyle":"custom" ，不使用小程序自带的导航栏，右上角胶囊按钮无法去掉。

tabBar 配置

注意事项：list 数组最多只能配置 5 个，图标图片需要使用本地图片，使用相对路径引入。

tabBar 一般是在界面的底部。

"tabBar": {
    // 选中时候的文字颜色
    "selectedColor": "#d81e06",
    "list": [
      {
          // 没选中时候的图标路径
        "iconPath": "images/tabs/index.png",
          // 选中时候的图标路径
        "selectedIconPath": "images/tabs/index_selected.png",
          // 点击 tab 的时候跳转的页面
        "pagePath": "pages/index/index",
          // tab 的文字
        "text": "首页"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },

配置项图解

局部页面配置项

页面配置项只能对本页面的窗口表现进行配置，也就是 window 的子配置项，不能配置 tabBar 和 pages 。

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#00c777",
  "navigationBarTitleText": "首页"
}

如果 app.json 配置了某个属性，页面 json 也配置了，以页面配置项为主。

小结

全局配置的 pages ，window 配置项。

pages 页面配置项，小程序的页面必须要在 pages 配置过才可以访问。

window 窗口表现配置项，主要用于配置标题栏和下拉后的背景。

tabBar tab栏配置项，一般在底部，用于切换页面的。

小程序样式 wxss

目标

小程序 rpx 单位的使用。

概述

wxss 主要的功能还是 和 css 是一样的，wxss 新增了 rpx 单位。

rpx 单位 *

rpx ( responsive pixel) 响应式像素，小程序把所有设备的屏幕都水平分成 750份，也就是 750rpx 刚好占满水平方向整个屏幕。

微信小程序常用布局的单位主要是： rpx 和 % . 尽量不要使用 px 或 rem。

其他补充

1. app.wxss 不需要引入，样式对整个项目都生效，页面的样式，也不需要引入，页面自动生效。

2. 如果希望引入某个样式，使用 @import "样式的路径";

小结

小程序的样式几乎和平常书写一样，主要就是单位需要换成 rpx 和 %;

编译模式 - 单页调试

目标

学会添加编译模式调试页面。

概述

小程序页面调试不能像网页那样通过url地址访问，每次编译刷新的时候，都默认跳转到 pages 配置项中的第一个页面，对其他页面调试很不方便。

添加编译模式：在开发工具的编译模式中点击下拉三角箭头 - 添加编译模式，把需要调试的页面进行配置即可。

参考截图

小程序组件 - WXML

目标

学习小程序布局常用组件<image> <text> <view>

概述

小程序的组件 和 HTML 的标签，其实都是标记语法，符合 XML 语法规范。

小程序所有标签都需要闭合，小程序建议使用双标签。

文本组件

<text>文本组件</text>

显示模式：行内显示模式。

注意事项：

1. <text> 只能嵌套 <text> 。

2. 只有 <text> 组件才能实现长按选中文字，需要添加 selectable 开启长按选中。

3. 文本换行的时候可以使用 \n。

注意：如果组件属性的值布尔类型，添加了属性就相当于把值设置成了 true，所有组件通用。

图片组件

<image src="图片路径"></image>

图片注意事项

1. 图片有默认宽高，导致图片变形，所以引入图片的时候，记得通过样式设置宽高。

2. 本地图片会随着项目打包上传，图片过多导致项目慢，所以图片尽可能用线上图片。

3. webp图片格式在模拟器中和安卓手机上能显示，但是在 IOS 系统不能显示。

图片模式属性 mode

小程序 mode 显示模式默认是拉伸，对没设置宽度的图片进行拉伸就容易变形。

视图容器组件

<view> </view>

容器标签类似 <div> 标签，块级显示模式，常用于布局。

小程序不支持的标签会以行内元素形式排列，不支持：div p ul li ol dt dd h1~h6 ...

初始项目文件补充说明

文件	功能	备注
project.config.json	项目配置文件	主要是编辑器的配置
sitemap.json	小程序内搜索	默认所有页面都能被搜索
util.js	就是一个JS文件	小程序JS支持模块化导入，导出

图标组件

<icon type="图标类型" color="图标颜色" size="图标尺寸"></icon>

注意事项：size 的单位默认是 px，不能适配所有的终端，建议书写的时候使用 rpx 单位。

富文本组件 *

<rich-text nodes='HTML节点'></rich-text>

注意事项：nodes 属性可以写HTML字符串节点或数组形式的节点。

富文本组件的内容不能单独添加事件，也不能点击富文本内的 <a> 标签跳转页面。

后端传递换行文字主要两种形式：

1. 如果是\n 换行，可以使用 <text>

2. 如果是<br> 换行，可以使用 <rich-text>

滑动组件（轮播图）

滑动组件是主要用于制作轮播图，当然可以做其他的滑动效果。

<swiper
        // 开启小圆点指示器
  indicator-dots 
        // 无缝衔接轮播
  circular 
        // 自动播放
  autoplay 
        // 自动播放的间隔
  interval="2000" 
        // 小圆点默认颜色
  indicator-color="rgba(255,255,255,.3)"
        // 小圆点活跃状态下的颜色
  indicator-active-color="#fff"
>
  <swiper-item> 内容 1 </swiper-item>
  <swiper-item> 内容 2 </swiper-item>
  <swiper-item> 内容 3 </swiper-item>
</swiper>

常用表单组件

input 输入框组件

小程序的输入框显示模式：块级显示模式。

输入框是否带边框：默认不带边框。

是否支持 value placeholder ：支持，和之前学习的一样。

小程序输入框 type 值主要作用：控制弹起键盘的外观，只支持 4 个值。

type 值	说明	备注
text	文本输入	普通键盘
number	纯数字
idcard	身份证
digit	带小数点的数字键盘

confirm-type 的合法值

confirm-type 主要作用：修改弹起键盘右下角的 文字。默认文字是 完成

值	说明	备注
search	搜索 *	小程序的搜索框一般是通过修改键盘按键搜索
send	发送
next	下一个
go	前往
done	完成	默认值

button 按钮组件 *

显示模式：块级元素。

<button>按钮</button>

外观型属性

size 控制按钮大小
<button size="mini" >小按钮</button>
type 改变按钮颜色
<button type="warn">小按钮</button>

loading  在按钮文字前有加载的图标
<button loading> 小按钮</button>

按钮边框问题：按钮边框是在 button::after 上，参考代码如下。

button::after{
  border: none;
}

按钮的微信开放能力 **

开放能力核心属性： open-type

效果查看注意事项：需要在手机查看才有真实效果。

open-type 合法值	功能描述	备注
contact	客服聊天	可以在公众平台添加客服
share	分享
feedback	用户反馈	用反馈的信息能在公众平台看到
openSetting	打开授权设置

<button open-type="share">分享</button>
<button open-type="contact">客服聊天</button>
<button open-type="openSetting">打开授权设置</button>
<button open-type="feedback">用户反馈</button>

单选框复选框

复选框进行编组：<checkbox-group></checkbox-group>

单选框进行编组：<radio-group></radio-group>

<checkbox></checkbox>
<radio></radio>

navigator 导航链接 **

目标

navigator 跳转普通页，跳转 tabBar 页，后退

概述

类似 HTML 中 <a> 标签。

<navigator> 显示模式：块级显示模式。

<navigator> 的限制：只能用于跳转小程序的页面，不能跳转到网页。

跳转普通页和 tabBar 还需要设置 open-type。

页面栈

获取历史记录(路由栈)：

getCurrentPages()

1. 普通页面 跳转：会在路由栈中记录起来，最多只能记录 10 级页面，到达了 10 级，就不能跳转了。

1. tabBar 页面跳转：先把路由栈所有页面清空，再把当前 tabBar 页面入栈。

open-type

open-type 值	功能	备注
navigate	跳转 普通页	默认值
switchTab	跳转 tabBar页	路由栈只有一个页面 tabBar 页
redirect	重定向	替换当前页面
reLaunch	关闭所有页，打开某个页面	相当于重新打开小程序
navigateBack	返回	可通过 delta 修改返回层级

其他组件补充

组件名称	功能	备注
scroll-view	可滚动视图区域	超出盒子部分可以通过滚动查看
video	视频	视频组件是原生组件，显示层级非常高
cover-view	解决原生层级用的容器	可通过样式调整层级，以盖过原生的组件
cover-image	解决原生层级用的图片	支持嵌套在 cover-view 里
web-view	承载网页的容器	小程序内打开某个网页，需要配置才能生效
open-data	用于展示微信开放的数据	获取用户头像，获取昵称，获取地址
ad	广告	用户量超过 1000，不能违规

原生组件

小程序中的部分组件是由客户端创建的原生组件，这些组件有：

camera canvas input（仅在focus时表现为原生组件） live-player live-pusher map textarea video

注意事项

带来的问题：原生组件的显示层级高于普通组件。

解决方案：用 cover-view cover-image 设置层级的方式盖过原生组件。

WXML 进阶语法

数据绑定

Page({
  // 页面数据
  data: {
    msg: "今晚吃什么？"
  }
});

<view>{{ msg }}</view>

列表循环

核心指令 ：wx:for="{{ }}"

提高效率指令：wx:key=""

修改 item 和 index 名称 ：主要用于循环嵌套，wx:for-item="item" wx:for-index="index"

<block> 标签主要功能：把结构编组，在 <block> 标签上写指令，block 不会显示到页面中。

wx:key 提高效率两种情况 *

1. 数组每一项数据是字符串或者数字，使用：wx:key="*this"

2. 数组每一项数据是对象，使用 ：一般情况下数据的 id 具有唯一性，wx:key="id"

参考代码

Page({
  // 页面数据
  data: {
    objArr: [
      {
        id: 1,
        name: "分类"
      },
      {
        id: 2,
        name: "秒杀"
      },
      {
        id: 3,
        name: "其他"
      }
    ]
  }
});

<view class="list">
  <block wx:for="{{ objArr }}" wx:key="id">
    <view class="item"> {{ item.name }} {{ index }}</view>
  </block>
</view>

条件渲染

<view wx:if="{{  }}"></view>
<view wx:elif="{{  }}"></view>
<view wx:else></view>

补充 hidden 属性：

小程序中没有 v-show 切换盒子显示隐藏，小程序可以通过 hidden属性切换隐藏或显示。

小程序中的 AppData 模板数据

 

 

小程序自定义组件

组件使用步骤

1. 新建组件结构：在 组件.json 有 "component":true 属性， 组件.js 入口函数是 Component()

2. 在页面中导入组件：在 页面.json 中 使用 usingComponents:{ 组件名称: 组件路径 } 导入。

3. 在页面中使用组件：使用 <组件名称> </组件名称>即可，如果组件名是组合词，使用 - 连接。

小程序组件名称注意事项。

首字母大写（Search）便于和官方组件区别开来

 

转载于:https://my.oschina.net/u/4155188/blog/3073652