简单组件

 text 文本view 区域button 按钮input 表单image 图片include 包含import 导入<web-view> 导入html页面

模板语法

文本渲染

{{表达式}}

条件渲染

wx:if=="{{}}"
wx:elif="{{}}"
wx:else
// 等同于vue v-if

自定义列表

wx:for="{{}}"  内含 {{item}} 和 {{index}}
wx：key="{{}}"
// 等同于vue v-for  :key值
wx:for-item="myitem" // item重命名
wx:for-index="ind"   // index重命名

import

// 定义模板 在test.wxml
<tepm name="user">
<view>用户名：{{name}}</view>
// 使用
<import src="xxx/test.wxml">
<template is="use" data={{...userInfo}}>  // data={{...userInfo}} 传入数据

事件

bindtap 触摸/点击
bindchange 值发生变化
bindconfrim 确认
bindinput 输入变化

表单的双向绑定

// wxml
<input value="{{temp}}" bindinput="inputHd">// js
inputHd(e){this.setData({temp:e.detail.value})// 获取事件对应表单的值 e.detail.value
}

事件的传参数

// wxml
<button bindtap="showMsg" data-msg=“你好，靓”>
// js
showMsg(e){e.target.dataset.msg
}

响应式更新

this.setData({temp:''})
// 数据与视图都会更新

wx 的api

微信内置的方法

// 弹出消息提示框
wx.showToast({title:"",icon:})// 显示 loading 提示框。
wx.showLoading()// 网络请求工具
wx.request()// 停止下拉刷新
wx.stopPullDownRefresh()// 本存储  存、取
wx.setStorageSync(key,value)  // 存
wx.getStorageSync(key)        // 取

配置

全局配置都在  app.json 文件内
页面配置都在 (本页面).json 文件内

// 页面配置"backgroundTextStyle": "light",// 背景文字颜色 light | dark"navigationBarBackgroundColor": "#f70",// 背景颜色"navigationBarTitleText": "小程序基础语法",// 导航栏表情"navigationBarTextStyle": "white"// 导航栏+状态栏文字颜色  white | black"enablePullDownRefresh": true,// 允许页面下拉刷新"usingComponents": {}// 使用组件

页面生命周期

// 页面加载 可以获取页面传递的参数
onLoad
// 前台显示 开始播放视频
onShow
// 初次渲染完毕 操作组件或者dom
onReady
// 隐藏 停止播放
onHide
// 卸载
onUnload

js 内置函数

// 下拉刷新
onPullDownRefresh
// 触底
onReachBottom

页面跳转

组件 navigator

path 跳转的页面
open-type : 属性navigate 跳转redirect 重定向（不理历史记录）switchTab 切换底部栏navigateBack

js 跳转

 wx.navigateTo       // 跳转wx.switchTab           // 底部栏切换wx.redirectTo       // 重定向wx.navigateBack()     // 返回

小程序页面栈

小程序默认会缓存5个页面栈
A=>B=>C=>D=>E
这个5个页面都会缓存
navigate 添加一个缓存页面栈
navigateBack 移除一个页面栈
redirect 替换一个一个页面栈

npm使用 --weapp为例

01 在项目的根目录 npm init -y
初始化项目

02 npm i @vant/weapp -S --production
安装

03 构建npm
编辑器-》工具-》构建npm

04 修改app.js : “style”: “v2” 去除
注册组件
“usingComponents”: {
“van-button”: “@vant/weapp/button/index”
},

05 修改project.config.json

"setting":{// 在setting中添加"packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./miniprogram/"}],
}

06 在组件中使用

<van-button type="info">主要按钮</van-button>

小程序的生命周期

onLaunch 启动
onShow 前台显示
onHide 后台运行

全局数据

在 app.js 文件中

// 定义全局数据globalData: {    num:5}

在页面中使用

// 定义app
const app = getApp();
// 更新在本页面的 count值  等于 全局数据的 num
this.setData({count:app.globalData.num})
// 更新时候要更新本地和全局addCount(){// 更新全局的numapp.globalData.num +=1},

小程序 (基础认识)相关推荐

更改微信小程序的基础版本库；更改uni-app小程序基础库；更改用户的微信小程序基础库最低版本；设置用户的微信小程序版本库；
需求场景:微信小程序不少API都有最低版本支持,为了避免不必要的麻烦,我们可以根据需要给小程序设置基础库最低版本,这样若用户使用的基础库版本低于设置的最低版本要求,则无法正常使用小程序,并提示更新微信 ...
每日优鲜小程序基础组件介绍
每日优鲜小程序基础组件介绍 1.基础组件介绍 2.基础组件的结构与作用 3.基础组件的接入方法初次引入初始化更新与维护基础组件接入 1.基础组件介绍小程序基础组件基于每日优鲜主商城小程序业务 ...
微信小程序不支持打开非业务域名_开达应用五端合一：抖音/头条小程序基础配置...
抖音/头条小程序基础配置小程序AppKey AppSecret获取登录到字节跳动小程序管理平台,开发: 域名配置登录到字节跳动小程序管理平台,进入开发»服务器域名,点击添加自己的网站域名登录 ...
抖音小程序基础之 TTSS 样式是什么
抖音小程序基础之 TTSS 样式是什么 TTSS 样式 TTSS 具有 CSS 大部分的特性,小程序在 TTSS 也做了一些扩充和修改. 新增了尺寸单位.在写 CSS 样式时,开发者需要考虑到手机设备 ...
《微信小程序-基础篇》初识微信小程序
大家好,好久不见了,前段时间各种原因分享不稳定,后面一段时间内参与了主站的原力计划,请麻烦各位支持一下,万分感谢- 本系列将从零开始介绍微信小程序的开发,介绍完基础以后会实际同步开发一个微信小程序的项 ...
微信小程序基础（全家福01）
微信小程序基础目标能够知道如何创建小程序项目能够清除小程序项目的基本组成结构能够知道小程序页面有几个部分组成能够知道小程序中常见的组件如何使用能够知道小程序如何进行协同开发和发布讲解目录 ...
微信小程序基础库的问题
微信小程序基础库的问题很多刚开始开发小程序的开发者经常会遇到在开发者工具的模拟器里面可以正常使用小程序的某个API,但是在预览(真机测试)时打开调试发现使用的API报错,但是开发工具里面的基础库是支 ...
微信小程序--基础内容（详解）（一）
一.常用标签 1.view 标签 view 标签是一个块级元素,类似于 div(小程序里面没有div标签),里面可以放任何内容或者插值表达式,如下所示: <view>这是view标签< ...
微信小程序基础语法
微信小程序基础语法官网:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/ .wxml文件中列表渲染 <view ...

小程序 (基础认识)

简单组件

模板语法

事件

表单的双向绑定

事件的传参数

响应式更新

wx 的api

配置

页面生命周期

页面跳转

小程序页面栈

npm使用 --weapp为例

小程序的生命周期

全局数据

小程序 (基础认识)相关推荐

最新文章

热门文章