【微信】小程序学习笔记

鬼谷子叔叔 - 2019-09-29 14:17

介绍

官方网址

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>

鬼谷子叔叔
跟福哥学编程吧~~

热度 1626

文章 212