【微信】小程序学习笔记

发表于 2019-09-29 14:17:42
阅读 30

介绍

介绍

官方网址

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工具,只要一路“下一步”即可,最后点击完成!

1111.jpg

开发

准备工作

扫描二维码进入IDE工具

2222.jpg

建立项目

点击 + 建立项目

4444.jpg

参数说明

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

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

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

  • 开发模式 - 默认

  • 语言 - 默认

5555.jpg

目录结构

页面

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

6666.jpg

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

  • 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>