微信小程序基础

微信小程序基础

官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/

---

app.json

“pages”

路由配置

“window”

窗口样式

“useExtendedLib”

使用外部扩展库（如weui）

使用方法：

模拟器样式

iPhone 6/7/8

常用单位：rpx、rem

方便写响应式页面，r即reactive adj.响应式的

---

pages文件夹

小程序页面，对应的在app.json中配置

index.js

用于定义函数及向前端页面传参

index.json

对index页面的单独配置

“usingComponents”

声明app.json中声明的组件库中的组件

index.wxml

前端页面，使用mustache语法（即两对大花括号"{{}}"）获取js中的参数。

mustache语法允许在前端页面中进行一些简单的操作，如四则运算、三元运算、逻辑判断、字符串运算等。

如：

也可定义object并使用.调用object中的参数。

如：

注：如果保存后刷新没反应就自己点编译

wxml语法与vue中组件大致类似，最外部需要<view />标签包裹。

一些语法

条件渲染

wx:if=“”，wx:elif=“”，wx:else，用法与vue中v-if v-else相同。

注：wx:else后不用跟条件

bindtap

触摸事件

……

index.wxss

语法与css相同，使用TypeScript后支持less、scss等预编译器。

类名选择器：“.”

id选择器：“#”

元素选择器：“p”

伪元素选择器：“::before”

……

---

utils文件夹

自己封装的一些方法，需要使用module.export导出

在其他页面中使用则需要require(path)导入

---

sitemap.json

用于配置小程序页面是否允许微信索引。当允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。

如：

注：小程序不发布用不到这玩意

---