组件
text—文本
<text>000</text>
//和span标签方法相同
view—区域
<view>view区域</view>
//和div相同,可以包裹text、button、input等
button—按钮
input—表单
<input style="border: 2rpx solid #000;"/>
//小程序的input需要注意后边的“/”必须要加上
image—图片
<image src="路径/网址"></image>
include—包含
<!-- include 相当于拷贝,就是不拷贝template的内容 -->
<view class="title">include导入非template</view>
<include src="/template/test"></include>
import—导入
<view class="title">模板</view>
<import src="/template/test"/>
<template is="user" data="{{...userInfo}}"></template>
<template is="user" data="{{...userInfo2}}"></template>
表单的双向绑定
changeMsg(e){
console.log(e)
this.setData({msg:e.detail.value})
},
//wxml代码
<input
value="{{msg}}"
bindinput="changeMsg"
style="border: 1rpx solid red;padding: 15rpx;margin: 15rpx;"
type="text"/>
<view>{{msg}}</view>
事件的传参
<button bindtap="showMsg" data-msg=“你好”>
showMsg(e){
e.target.dataset.msg
}
底部栏
"tabBar": {
"color": "#777",
"selectedColor": "#1cb9ce",
"list": [
{
"pagePath": "pages/yidian/yidian",
"text": "有点料",
"iconPath": "/images/t4.png",
"selectedIconPath": "/images/t4-h.png"
},
{
"pagePath": "pages/nav/nav",
"text": "跳转",
"iconPath": "/images/t1.png",
"selectedIconPath": "/images/t1-h.png"
},
{
"pagePath": "pages/todo/todo",
"text": "计划",
"iconPath": "/images/t2.png",
"selectedIconPath": "/images/t2-h.png"
},
{
"pagePath": "pages/jok/jok",
"text": "开心一下",
"iconPath": "/images/t3.png",
"selectedIconPath": "/images/t3-h.png"
}
]
},
小程序内置api
wx.showToast({title:"",icon:})
//弹出土司提升
wx.showLoading()
wx.request()
//网络请求工具
wx.stopPullDownRefresh()
//停止下拉刷新
wx.setStorageSync(key,value)
wx.getStorageSync(key)
//本次存、取
npm使用
1、在项目的根目录 npm init -y初始化项目
2、npm i @vant/weapp -S --production 安装
3、构建npm编辑器->工具->构建npm
4、修改app.js
注册组件
"usingComponents": {
"van-button": "@vant/weapp/button/index"
},
5、修改project.config.json setting
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
],```