shine001
shine001

小程序知识点汇总

一、微信小程序特点

二、使用准备

1.注册开发者帐号

2.下载微信开发者工具

3.微信开发文档

三、项目结构

四、配置文件

1、app.json

pages 存放项目的页面

window 项目的窗口

tabBar 底部栏的配置

2、页面.json


image.png

五、小程序内置组件

逻辑视觉分区(div)

文本(span)

图片组件

选择

图标

滚动区域

幻灯片

六、模板语法

条件渲染

多重条件渲染

文本渲染

列表渲染

自定义列表渲染

一、微信小程序特点
小程序依赖微信
快，因为免去下载和安装
小，一个包不能超过2M
强,微信有什么能力它也拥有
广,传播微信圈子近10亿用户
QQ 微信 支付宝 字节跳动 美团 鸿蒙 都有类似小程序

二、使用准备
1.注册开发者帐号
注册小程序帐号
https://mp.weixin.qq.com/

2.下载微信开发者工具
稳定版 Stable Build | 微信开放文档
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

3.微信开发文档
微信开放文档
https://developers.weixin.qq.com/miniprogram/dev/framework/

三、项目结构

四、配置文件
1、app.json
pages 存放项目的页面
哪个页面在最前面，哪个页面是默认页面

window 项目的窗口

"backgroundTextStyle": "light", 背景文字:light|dark
"navigationBarBackgroundColor": "#000", 导航栏背景颜色
"navigationBarTitleText": "BLACK", 导航栏标题
"navigationBarTextStyle": "white" 导航栏文字颜色:white|black

tabBar 底部栏的配置

  "tabBar": {
    "color": "#484848",
    "selectedColor": "#109fef",
    "list": [{
      "pagePath": "pages/base/base",
      "text": "语法",
      "iconPath": "/images/home.png",
      "selectedIconPath": "/images/home-h.png"
    }]
  },

color 文字默认颜色
selectedColor 文字选中颜色
list 页面列表：

    pagePath 页面地址
    text 文本
    iconPath 图标地址
    selectedIconPath 选中图标地址

2、页面.json
"usingComponents": {} 使用组件

"navigationBarTitleText": "基础语法" 标题

"enablePullDownRefresh": true 允许下拉刷新

"backgroundColor": "#eee" 背景颜色

"backgroundTextStyle": "dark" 背景文字颜色

五、小程序内置组件
逻辑视觉分区(div)
文本(span)
user-select="true" 用户长按可选择

图片组件
src 图片地址
mode 模式：

scaleToFill:不保持宽高比,缩放
aspectFit:保持宽高比,长边优先
aspectFill:保持宽高比,短边优先
widthFix:宽不变,高自动
heightFix:高不变,宽自动
left right top bottom center:显示局部

value 值

placeholder 提示文本

password="true" 密码框

type 弹出不同键盘：

text 文本输入键盘
number 数字输入键盘
idcard 身份证输入键盘
digit 带小数点的数字键盘
safe-password 密码安全输入键盘 指引
nickname 昵称输入键盘
confirm-type 键盘右下角案例

send 右下角按钮为“发送”
search 右下角按钮为“搜索”
next 右下角按钮为“下一个”
go 右下角按钮为“前往”
done 右下角按钮为“完成”