介绍

介绍

官方网址

https://mp.weixin.qq.com/cgi-bin/wx

安装

开发环境

IDE工具

工具介绍网址 https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

工具下载网址 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

安装IDE工具，只要一路“下一步”即可，最后点击完成！

开发

准备工作

扫描二维码进入IDE工具

建立项目

点击 + 建立项目

参数说明

• 项目名称 - 写一个项目的名字，这里是 demo

• 目录 - 项目存储路径，根据自己需要选择

• AppID - 从管理发布微信小程序的账号，可以先用测试账号

• 开发模式 - 默认

• 语言 - 默认

目录结构

页面

页面是一个模型，存在于 pages 目录下

每一个页面包括一套文件，最基本的有

• js - 程序逻辑文件

• json - 程序数据文件

• wxml - 程序视图文件

• wxss - 程序样式表文件

以上的文件的文件名称需要和页面名称相同

程序逻辑

Page函数

每个页面都是通过 Page() 函数驱动起来的，Page() 的参数是一个 json 对象

Page函数参数

• json 对象的 data 属性可以理解为页面这个对象的属性

• json 对象的所有 function 可以理解为页面这个对象的方法
  

内建方法

• setData，用来设置页面对象属性

数据优先级

data 属性设定的值，是默认值

通过 setData 方法修改的值，会覆盖 data 属性的值

语法

if...else

建立两个元素，第一个写上 wx:if，另一个写上 wx:else

两个元素必须连着写，中间不能放其他元素

当 wx:if 后面的表达式成立的情况下，wx:if 所在的元素会被保留，wx:else 所在的元素会被销毁掉

当 wx:if 后面的表达式不成立的情况下，wx:if 所在的元素会被销毁掉，wx:else 所在的元素会被保留

注意：这里用的是“销毁”不是“隐藏”，因为被销毁的元素在 DOM 结构里根本不会存在

<div wx:if="{{1==2}}">
      <b>成立</b>
</div>
<div wx:else>
      <b>不成立</b>
</div>