【WX小程序】简单笔记，一些速成

小程序文件结构

---

app.js

官方文档
调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

app.json

官方文档中查看各种属性
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象 /。

• 页面配置，创建页面从这里输入路径，自动建好
  

• 控制窗口样式：
  

• 设置导航栏：
  
  导航栏中list数组中控制bar的按钮数量，其余属性查看微信文档配置

• 可进行部分页面单独配置
  可用属性参考
  app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的 .json 文件来对本页面的表现进行配置。
  页面中配置项在当前页面会覆盖 app.json 中相同的配置项（样式相关的配置项属于 app.json 中的 window 属性，但这里不需要额外指定 window 字段）
  

app.wxss

全局样式表

sitemap.json

微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。

页面速成

微信小程序结合vue和react的特性，很少使用js操纵dom，而是动态渲染界面，

数据绑定

官方文档

WXML 中的动态数据均来自对应 Page 的 data。

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可作用于：

• 内容
• 组件属性(需要在双引号之内)
• 控制属性(需要在双引号之内)
• 关键字(需要在双引号之内)

示例

• wxml文件内容

<view> {{ message }} </view>
<view wx:if="{{condition}}"> </view>
<checkbox checked="{{false}}"> </checkbox>

• js文件内容

Page({
  data: {
    message: 'Hello MINA!'
  }
})

使用wx:if&wx:else控制显示

<view wx:if="{{isCreated}}">我是动态创建和删除-111111111</view>
<view wx:else>我是动态创建和删除-2222222222</view>

还可使用hidden：

<view hidden="{{isHidden}}">我是动态隐藏和显示</view>

hidden控制显示：display：none，而wx:if直接控制渲染出来的界面是否有代码。

按钮

不是原生样式，而是wx自带组件的一种，可设置type属性

<button type="primary" bindtap="handleTap">click1</button>

绑定事件

微信定义了各种事件，直接写入标签中，如bindtap="handleTap"，后面是要调用的函数
事件分类
要注意冒泡事件和非冒泡事件的区别，详见文档

js操纵数据

• Page(Object object)

注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

• data中放初始化数据，页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。
• 修改其中的数据，要使用setData方法
  setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）
  文档链接
• 开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问。这部分属性会在页面实例创建时进行一次深拷贝。

wxml传参方式：

使用data-进行自定义属性，取值使用e.target.dataset.自定义名

wxs

在页面中引入，然后使用暴露出的模块接口
commonJS规范，无法使用es6