微信小程序超详细知识点总结

发布时间：2023-04-21 文章分类：WEB开发, 电脑百科 投稿人：王小丽 字号： 默认 | 大 | 超大 打印

一、微信小程序特点

二、使用准备

1.注册开发者帐号

2.下载微信开发者工具

3.微信开发文档

三、项目结构

四、配置文件

1、app.json

pages 存放项目的页面

window 项目的窗口

tabBar 底部栏的配置

2、页面.json

五、小程序内置组件

逻辑视觉分区(div)

文本(span)

图片组件

选择

图标

滚动区域

幻灯片

六、模板语法

条件渲染

多重条件渲染

文本渲染

列表渲染

自定义列表渲染

一、微信小程序特点

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" 背景文字颜色

五、小程序内置组件

<view> 逻辑视觉分区(div)

<text> 文本(span)

user-select="true" 用户长按可选择

<image> 图片组件

src 图片地址
mode 模式：

<input>

value 值

placeholder 提示文本

password="true" 密码框

type 弹出不同键盘：

confirm-type 键盘右下角案例

<button> 按钮

type 颜色类型

size="mini" 行内小按钮

<switch> 切换

color 颜色

type="checkbox" 选择框

<picker> 选择

header-text 标题文本

mode：

<icon> 图标

type：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

size="100" 单位为px

<scroll-view> 滚动区域

scroll-x 水平

scroll-y 垂直

<swiper> <swiper-item> 幻灯片

indicator-dots="true"  是否显示提示点

autoplay="true" 自动播放

circular="true" 衔接滑动

六、模板语法

条件渲染

wx:if="{{条件}}"

多重条件渲染

wx:elif="{{多重条件}}"
wx:else

文本渲染

{{}}

placeholder="{{msg}}"  属性的渲染

列表渲染

<view wx:for="{{list}}" wx:key="index">{{index}}.{{item}}</view>

自定义列表渲染

 多层for循环 定义名称

<view wx:for="{{list}}"
        wx:for-item="myitem" wx:for-index="myindex" 
        wx:key="myindex"
>
{{myindex}}.{{myitem}}
</view>

 注意：key值自动解构。eg：若想使用item.docid做为key，wx:key="docid"即可

<template> 模板 

定义:

<template name="user">
<view>用户名：{{name}}</view>
</template>

导入：只能导入template

<import src="..."></import>

 使用：

<template is="user" data="{{name:'mewow'}}"></template>

<include> 引入

<include src="..."></include>

相当于把src的内容拷贝一份放在当前位置，不能导入template

七、事件

事件方法

bindTap 点击

bindconfim 确认

bindchange 表单值发生变化

bindinput 表单输入

普通事件 

调用方法：

<button bindTap="showMsg">事件</button>

自定义方法：

showMsg(){}

事件传参

定义参数：

<button bindtap="showMsg" data-msg="小程序">小程序</button>

在方法中获取参数：

showMsg(e){
  let msg=e.currentTarget.dataset.msg;
  wx.showToast({
    title: 'hello '+msg,
    icon:"loading"
  })
}

八、表单双向绑定

 表单：

<input type="text" value="{{msg}}" bindinput="changeHd"/>

定义方法更新视图和data：

changeHd(e){
  let msg=e.detail.value;
  this.setData({msg})
}

九、data与更新

js方法里data数据：this.data.msg

在wxml使用：{{msg}}

更新data与视图：this.setData({key1:value1,key2:value2})

注意：this指向,在wx.xxx api里面this的wx这个对象不是当前页面

十、微信api

Page参数

data 存储数据

onload() 当页面加载中

onPullDownRefresh 下拉刷新回调函数

onReachBottom 触底回调函数

wx.xxx

wx.stopPullDownRefresh();  停止下拉刷新

wx.showToast({})  轻提示

wx.request({url,method,success(){}}) 网络请求：

标签 , ,