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

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

最近在学习微信小程序，之前也有学过一些，前面的忘的差不多了，写个文档复习一下这些基础知识

一、小程序配置文件

小程序有两种配置文件，全局的app.json和页面单独的page.json

注意：配置文件中不能出现注释

1.1 全局配置 app.json

官方文档

小程序的全局配置，包括所有页面路径、界面表现、网络超时时间、底部tab。

举个例子

这是之前学的项目的配置文件的一部分

各字段的含义

pages字段 —— 用于描述当前小程序所用页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录

window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义，导航文字

tabBar字段 —— 定义小程序的底部导航栏样式

tabBar 配置属性

1.2 页面配置 page.json

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。

可以独立定义每个页面的一些属性，如顶部颜色、下拉刷新等等

注意：如果有与app.json文件相同的配置项，页面中的配置项将会覆盖app.json中window中的配置项

1.3 sitemap.json 配置

⼩程序根⽬录下的 sitemap.json ⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引。

二、wxml语法

2.1 数据绑定

wxml文件中的模板语法

在同页面下的js中传入模板数据

模板语法

数据传递

Page({ data: { id: 0 } })

不能直接写 checked = “false”，该计算结果为字符串

2.2 运算

采用wx:if 来判断是否需要渲染该代码块：

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

1 2 3

注意：如果需要控制多个组件标签，可以使用block标签将多个组件包装起来，给block加上控制属性

注意： 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性

{{"hello" + name}}

//page中的js文件 Page({ data:{ name: 'MINA' } })

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

2.3 列表渲染

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

{{index}}: {{item.message}}

array: [{ message: 'foo', }, { message: 'bar' }]

由于未设置wx:key属性因此会有警告，提示采用wx:key来提高性能

wx:key绑定的值有几种选择

string类型，表示循环项中的唯一属性

保留字*this，表示item本身，代表唯一的字符串和数组

2.4 条件渲染

类似wx:if，频繁切换用hidden，不常使用wx:if

三、事件绑定

通过bind关键字来实现。如 bindtap 、bindinput 、bindchange 等

给input绑定输入事件

事件处理函数，将这个数据映射到 data 数据中

handleInput(e) { this.setData({ num: e.detail.value }) }

3.1注意事项

绑定事件时不能带参数，不能带括号，以下错误示范

事件传值，通过标签自定义属性的方式和value

事件触发时获取数据

handleInput: function(e) { // {item:100} console.log(e.currentTarget.dataset) // 输入框的值 console.log(e.detail.value); }

四、wxss 样式

wxss 扩展特性

响应式长度单位rpx

样式导入

4.1 尺寸单位

rpx: 可以根据屏幕宽度进⾏⾃适应

使⽤步骤：

确定设计稿宽度 pageWidth

计算⽐例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth

在 less ⽂件中，只要把设计稿中的 px => 750/pageWidth rpx 即可。

4.2 样式导入

使⽤@import 语句可以导⼊外联样式表，只⽀持相对路径。

@import "common.wxss"; .middle-p { padding:15px; }

4.3 选择器

不支持通配符选择器*

仅支持以下选择器

好忙，好忙，好忙~

JavaScript 小程序

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。