微信小程序

最新推荐文章于 2024-09-06 08:31:32 发布

巴黎の梦

最新推荐文章于 2024-09-06 08:31:32 发布

阅读量75

点赞数

文章标签：微信小程序 javascript 前端

本文链接：https://blog.csdn.net/m0_71073278/article/details/126673712

版权

本文详细介绍了小程序开发中的各种组件，如text、view、button、input和image等，还涵盖了表单双向绑定、事件传参、底部栏配置、内置API以及npm组件管理和使用。通过实例演示了如何在实际项目中应用这些技术。

摘要由CSDN通过智能技术生成

组件

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/"
      }
    ],```