2020-05-18发表2025-09-11更新前端学习19 分钟读完 (大约2911个字)0次访问

微信小程序 - 一些基础

微信小程序从搭建到部署

对小程序的第一印象，是它推出的那一年。那时候是在朋友圈还是我的页面底下有一个入口，对于那时候我来说，只是知道能点进去看一下，其他的不明所以。

大学的时候小程序这选修课大家争先来选修，我也一样。但是选课的时候是由高年级开始选的，我那时候还是大一（下个学期大二）只能蹲着等有空位，结果运气好还真被我蹲到了。那时候对小程序也是一无所知，除了听别人说想要用它需要学会vue。于是暑假回去我自学了vue，果然兴趣是最好的老师？

项目搭建

搭建

创建：

来这里注册一个小程序账号（可以在开发者工具使用测试号）：注册
下载开发者工具：下载
在开发者工具中点击”新建项目”进行小程序新建

创建的项目大致目录：

小程序目录

文件类型和作用：

.json：页面的配置文件
.js：页面的逻辑文件
.wxml：页面的结构文件
.wxss：页面的样式文件

components：组件，复用性高的模块或者代码量大的模块都可以放在这（每个组件都有自己的js、json、wxml、wxss）

pages：页面，是一个文件夹，每个页面都有自己的js、json、wxml、wxss，默认首页为pages/index/index页面

app：小程序的全局文件，比如app.json里面可配置：

pages：页面路径，对应pages文件夹下的页面
window：全局配置页面的样式

project.config.json：项目配置文件（web中的package.json），里面可配置项目的相关信息

project.private.config.json：项目私有配置文件，里面可配置项目的私有信息，会覆盖project.config.json中的配置

sitemap.json：网站地图，小程序SEO优化的配置文件，控制哪些页面可被搜索、收录等

{
  "desc": "关于本文件的描述",
  "rules": [
    {
      "action": "allow" or "deny",
      "page": "页面路径",
      "params": "参数条件（可选）",
      "match": "精确匹配（exact）或前缀匹配（prefix）"
    }
  ]
}

文件类型

WXML

WeiXin Markup Language，相当于 HTML 并且加上了微信自己的语法

数据绑定、条件判断

动态值在{{}}中

<view>
    <button wx:if={{isShow.btn}}>btn</button>
    <text wx:else>{{msg}}</text>
    <view id="item-{{id}}"> </view>
    <checkbox checked="{{false}}"> </checkbox>
</view>

Page({
    data: {
        isShow: { btn: true },
        msg: 'hello world!'
        id: 1,
    }
})

如果花括号或引号中间由空格，会被解析为字符串

1
2
3

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

相当于：

1
2
3

<view wx:for="{{[1,2,3] + ' '}}">
  {{item}}
</view>

列表渲染

默认项为item，默认索引为index。可通过wx:for-index和wx:for-item指定

1
2
3

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
    data: {
        array: [
            { message: 'Foo' },
            { message: 'Bar' }
        ]
    }
})

<block>，多节点外层的父节点：

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

WXSS

相当于 CSS

扩展语法

TypeScript

在创建的时候选择TS模板，然后基于模板来开发

在typings/types/wx目录，可以点击右键->”更新声明文件”按钮来更新类型

如果项目中相同目录下同时存在同名的.js和.ts文件，.ts文件优先

Sass

可选择sass模板，也可以直接将wxss文件名改为scss文件，需要配置project.config.json：

{
    "setting": {
        "useCompilerPlugins": [
            "sass"
        ]
    }
}

.sass全局变量：

创建一个和app.scss同级的文件global.scss，编译器会自动在除了这个文件外的所有文件增加引用

1	@use '/global.scss';

尽量不要在这里写变量定义或方法定义

比如：

1 2	// global.scss $red: red;

// 其他.scss
.red {
  color: global.$red; // 使用 global 中的变量
}

Less

.less全局变量：

不需要像scss那样创建global.scss文件，只需要直接使用app.less，编译器会自动引用

1	@import (optional, reference) '/app.less';

比如：

// app.less
@redcolor: red;

.blue {
  color: blue;
}

// 其他.less
.blue {
  color: @redcolor; // 使用 app.less 中的变量
}

归档

旧编20200518

为了方便查找和复习，粗略列出一些可能常用到的标签、标签的属性、标签属性的值、方法、API。具体的还要以官方文档为主

一些标签

下面表示默认值时在 () 里面，表示 Boolean 值时使用 √和 ×

view 视图容器
text 文本域
button 按钮
- type：按钮类型
  - primary（绿色）
  - default（白色）
  - warn（红色）
- size：按钮大小，（ default 和 mini ）
image 图片
- mode：图片裁剪、缩放的模式（scaleToFill）
- 默认宽度：300px，高度：240px
form 表单
- bindsubmit：携带 form 中的数据提交
checkbox 复选框
radio 单选框
input 输入框…这里是单标签，并且标签内部要加入 / 作为结尾
- type 的合法值
  - text：文本输入键盘（默认）
  - number：数字输入键盘
  - idcard：身份证输入键盘
  - digit：带小数点的数字键盘
- password：是否是密码类型（×）
- placeholder-style：指定这个东西的样式（placeholder-class，指定样式类）
- bindblur：失去焦点时触发
progress 进度条
swiper 轮播图，子标签swiper-item
- indicator-dots：是否显示面板知识点（×）
- indicator-color：指示点颜色（rgba(0,0,0,.3)）
- indicator-active-color：知识点选中颜色（#000000）
- autoplay：自动播放（×）
- current：当前滑块所处的 index（0）
- current-item-id：当前滑块所在的 item-id，不能同时指向 current（String 类型）
  - 配合 <swiper-item> 使用，<swiper current-item-id="b"> <swiper-item item-id="b">
- interval：自动切换时间间隔(ms)，（5000）
- duration：滑块动画时长(ms)，（500）
- circular：是否采用衔接滑动（×）
- vertical：滑动的方向是否为纵向（×）
- bindchange：current 改变时触发的 change 事件
include 代码引用
- src：引用的 wxml位置
slider 表单组件，滑动选取某一个值
- backgroundColor：背景条颜色（ activeColor：已选择的颜色）
- max、min：最大最小值
- step：步长，取值大于 0 且可被 max‘min 整除
video视频播放
- src：你懂得 ^ ^V^
- loop：是否自动播放（×）
- controls：是否默认显示播放控件（√）
- enab-danmu：是否展示弹幕（×）
- danmu-list：弹幕列表
- danmu-btn：是否显示弹幕
- autoplay：自动播放（×）
- poster：视频封面的网络地址，controls 为（×）的时候设置无效
- bindplay / bindpause：触发事件
map 地图相关
- latitude：维度、longitude：经度（Number）
- scale：缩放级别，范围是 5~18（16）（Number）
- marker：标记点、poline：路线、circles：圆（Array）
- show-location：显示带有当先的当前定位点
- bindmarktap：单击标记点时触发，返回 maker 或 id （EventHandle，以下也是）
- bindregionchange：视野发生改变的时侯
- bindtap：单击地图、bindupdate：地图渲染更新完成
picker 从底部弹起滚动选择器
- header-text：选择器标题（仅安卓可用）
- mode：选择器类型
  - selector、multiSelector、time、date、region（省份）
- bindcancel：取消选择时触发（eventHandle）
- disable：禁用（false）
picker-view 嵌入的滚动选择器
scroll-view 实现可滚动视图区域
- scroll-x / scroll-y 允许横向/纵向滚动（×）
  - 纵向滚动需要在样式中为 scroll-view 设置一个固定高度，否则它会被子元素撑大
- scroll-top/scroll-left 设置竖向/横向滚动条的位置（number / string）
- bindscroll 滚动时触发的事件

一些 API

音频 API
- 创建一个 InnerAudioContext 实例
- var audioCtx = wx.createInnerAudioContext() ，audioCtx 是一个实例，也就是一个对象，里面有许多属性和方法
  - 属性：
    - src(嘿嘿嘿)、starttime(开始时间)、autoplay(自动播放)、volume(音量)
    - duration(音频长度，当前合法 src 的长度)、currentTime(当前时间)、paused(当前是暂停或是停止状态)
  - 方法：
    - play()、pause()、stop()、seek()、destroy()：销毁当前实例
    - 以下触发的时候，参数都是 callback
    - onCanplay(音频进入可播放状态时的事件)
    - onPlay()、onPause()、onStop、onSeek()、onError()、onEnd()：自然播放到结束、onTimeUpdate()：播放进度更新
背景音乐 API
- 创建一个 BackgroundAudioManager 实例对象
- var bgm = getBackgroundAudioManager()
- 在 app.json 中添加配置："requireBackgroundModes": ["audio"]
打电话
wx.makePhoneCall( { phoneNumber: '1311111111' } )
获取位置
- wx.getLocation() 方法获取用户当前的位置
- wx.openLocation() 方法显示该位置的地图
视频 API (VideoContext)
- wx.createVideoContext() 的一些常用方法
  - play()/pause()/stop()，播放/暂停/停止
  - seek(number)：跳转到指定位置
  - playbackRate(number)：播放倍速
  - requestFullScreen() / exitFullScreen()：全屏/退出全屏
  - sendDanmu：发送弹幕

一些事件监听

bindtap
- 表示绑定 tap 事件，点击触发
- 通过实践对象 e 可以获取
  - type ：事件类型
  - timestamp ：事件生成时的时间戳
  - target ：触发事件的组件的一些属性值集合
  - currentTarget ：当前组件的一些属性值集合
  - detail ：额外的信息
- catch 事件是可以阻止事件冒泡的，bind 事件不行
this.setDate( { } ) ,该方法的参数是一个对象
bindchange 当 value 值改变的时候触发

一些配置

“plugins” 中添加第三方插件
“window” 中配置页面的整体标题栏样式
“tabBar” 配置底部的菜单
- 最多可以配置 5 个选项
“requiredBackgroundModes”: [“audio”] 请求背景音乐
“usingComponents” 用在页面的配置文件中，表示使用组件

一些单位

vw 和 vh，分别表示页面的百分之百宽和百分之百高
rpx，常用的单位，750rpx 正好是页面宽度的大小

一些插件

腾讯视频插件
- 小程序管理后台，设置 - 第三方服务 - 添加插件
- 在全局 app.json 中：
  1
  2
  3
  4
  5
  6
  "plugins": {
  "tencentvideo": {
  "version": "当前版本",
  "provider": "插件里面的AppID"
  }
  }
- 在使用插件的具体文件中，如：video.json
  1
  2
  3
  "usingComponents": {
  "txv-video": "plugin://tencentvideo/video"
  }
  - txv-video 名字随便起，将用到 wxml 页面,和 js 中
- 在 xxx.wxml 中：
  1
  <txv-video vid="xxxmmm" playerid="txv1"></txv-video>
  - vid ：在腾讯视频指定视频的 url 后面，如果不行，点分享，在分享链接中也可以找到
  - playerid：指定当前标签，是一个特殊标记，可以随便起一个有特色的的
- 在相对应的 xxx.js 中：首先要使用 requirePlugin() 引入插件，然后调用 getTxvContext()
  1
  2
  3
  4
  5
  6
  onReady: function(){
  const TxvContext = requirePlugin('tencentVideo')
  var txvContext = TxvContext.getTxvContext('txv1')
  txv.Context.play()
  txv.Context.pause()
  }

一些细节

通过dataset区分元素（input）
- 可以使用 data-id 取代掉 id，例如：data-id=“num”，在绑定的事件中通过 e.target.dataset.id就可以获得
- 而且，通过e.target.dataset.名称就可以获得 data-名称 的值

一些注意

first-child 和 last-child 相对的是使用元素的本身

<div> <view>我是①</view> <view>我是②</view> </div>
- 如果要选中 div 里面的 view ，写的应该是 div view:first-child
使用 import 调用外部样式：import “ 路径 “

WXS

大名 WeiXin Script，和 js 差不多，是小程序的脚本语言，可以在 wxml 中插入
1
2
3
<wxs module="haha">
module.exports = function(value){ var x =xxx var m = mmm }
</wxs>
- 属性 module 表示模块名称，导出后，可以在标签中使用
  1
  <view> {{ haha(xm) }} </view>

微信小程序 - 一些基础

https://smalljerry.cn/2020/05/18/微信小程序/

作者

dsjerry

发布于

2020-05-18

更新于

2025-09-11

许可协议

#移动端

微信小程序 - 一些基础

项目搭建

搭建

文件类型

WXML

数据绑定、条件判断

列表渲染

WXSS

扩展语法

TypeScript

Sass

Less

归档

一些标签

一些 API

一些事件监听

一些配置

一些单位

一些插件

一些细节

一些注意

WXS

作者

发布于

更新于

许可协议

评论

分类

听听音乐

链接

订阅更新

最新文章

标签

广告

目录