微信小程序基础

124 阅读2分钟

1.注册号小程序开发者账号:

  https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN  
  
  

image.png

image.png

image.png

2.安装小程序开发工具

  https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
  

image.png

image.png

3.创建微信小程序

1.扫码登录小程序开发者工具

image.png

2.选择新建 小程序

image.png

3.填写小程序项目信息

image.png

4.成功创建

image.png

5.创建成功后需要在文件夹输入下面代码,才能在文件中显示html和css
  // 配置语言的文件关联
  "files.associations": {
    "*.wxss": "css",
    "*.wxml": "html",
  },
  

image.png

521b438777a774425dcde49dd745326.png

af2996c881239fdd26bfa95d3d181f0.png

4.微信开发工具

image.png

5.小程序目录结构

521b438777a774425dcde49dd745326.png

af2996c881239fdd26bfa95d3d181f0.png

image.png

image.png

6.小程序配置文件介绍

 全局 app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等配置

a09154077d64e5dee282ba42dcba7f1.png

image.png

image.png

5212f04a99fd9f1961d0bbe2455145b.png

c8bd97fc43d77f8bf8f52118254bbe9.png

页面配置
页面配置的文件是page.json。只能设置全局配置中关于window字段的功能。如设置页面标题,导航栏颜色等。
不用写window字段   优先级比全局配置高

image.png

image.png

7.配置项小节

a.微信小程序中有几种配置文件,分别是什么
   全局配置和页面配置
 
b.全局配置可以配置什么功能
   页面路径,页面标题,底部tab栏
  
c.全局配置的优先级高还是页面配置的优先级高
   页面配置

8.插值表达式与条件渲染

 小程序中的条件渲染的方式有两种:1.wx:if  2.hidden
 

image.png

image.png

image.png

wx:if 和 hidden之间的区别
相同点:
      wx:if   和 hidden 都能控制标签的显示和隐藏
      
不同点:
     wx:if 实现标签隐藏是通过移除标签来实现的
     hidden 实现标签隐藏是通过添加样式来实现的
插值表达式与条件渲染案例:

image.png

image.png

效果显示:

image.png

9.列表渲染

 列表渲染-循环唯一标识
 wx:key 针对不同的数组类型有不同的写法
 普通数组 wx:key="*this"
 数组对象 wx:key="字符串"  表示对象唯一属性 

image.png

image.png

列表渲染进阶案例

image.png

image.png

image.png

10.事件绑定

小程序中绑定事件,通过bind和catch关键字来实现
  bind 是事件冒泡         catch 是事件捕获   

image.png

11.data的获取和设置

image.png

案例:

image.png

image.png

小程序案例:增删改查

image.png

image.png

image.png