微信小程序（二）

最新推荐文章于 2024-05-09 09:40:37 发布

五秒法则

最新推荐文章于 2024-05-09 09:40:37 发布

阅读量3.3k

点赞数 2

分类专栏：微信小程序 vue2 文章标签：微信小程序 javascript 小程序学习

本文链接：https://blog.csdn.net/qq_51478745/article/details/131619492

版权

vue2 同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

微信小程序

4 篇文章 2 订阅

订阅专栏

进入本章前的拓展：

1、input标签

小程序的input标签新增了可以改变placeholder样式的属性

<view class="about-page">
  <input type="text" placeholder="请输入账号" placeholder-style="color:red" placeholder-class=""/>
</view>

.about-page{
  padding: 20rpx;
}
input{
  border: 2rpx solid #ccc;
}

一、表单绑定

1、数据绑定

（1）格式：value="{{变量}}"

（2）区别：小程序与vue的数据绑定

①小程序使用【mustache语法】绑定表单标签的value，数据流向【变量=》标签】

②vue是v-model双向数据绑定方式，数据流向【变量=》标签】及【标签=》变量】

（3）使用：

about.wxml

<view class="about-page">
  <input type="text" placeholder="请输入账号" placeholder-style="color:red" value="{{account}}"/>
</view>

about.js

data: {
  account:'默认',
},

（4）注意：

小程序value的属性值绑定要加插值符号{{}}

2、输入获取

（1）格式：bindinput="事件"

（2）使用：

about.wxml

<view class="about-page">
  <input type="text" placeholder="请输入账号" placeholder-style="color:red" value="{{account}}" bindinput="onValue"/>
</view>

about.js

data: {
  account:'默认',
},
onValue(e){
  console.log(e.detail.value);
},

（3）注意：

①直接赋值，虽然可以在终端实时输出改变数据，但是无法将实时数据显示到页面上

about.wxml

<view class="about-page">
  <input type="text" placeholder="请输入账号" placeholder-style="color:red" value="{{account}}" bindinput="onValue"/>
  输入框当前值：{{account}}
</view>

about.js

data: {
  account:'默认',
},
onValue(e){
  console.log(e.detail.value);
  this.data.account = e.detail.value
  console.log(this.data.account);
},

②小程序正确修改数据要放在this.setData({})中

onValue(e){
  console.log(e.detail.value);
  this.setData({
    account:e.detail.value
  })
  console.log(this.data.account);
},

（4）数据在对象内时

<view class="about-page">
  <input type="text" placeholder="请输入账号" placeholder-style="color:red" value="{{userInfo.username}}" bindinput="onValue"/>
  输入框当前值：{{userInfo.username}}
</view>

data: {
  userInfo:{
    username:'',
    password:''
  }
},
onValue(e){
  this.setData({
    ['userInfo.username']:e.detail.value
  })
},

（5）通用绑定封装

about.wxml

<view class="about-page">
  <input type="text" placeholder="请输入账号" placeholder-style="color:red" value="{{userInfo.username}}" bindinput="getValueInput" data-target="userInfo" data-key="username"/>
  当前账号：{{userInfo.username}}
  <input type="text" placeholder="请输入密码" placeholder-style="color:red" value="{{userInfo.password}}" bindinput="getValueInput" data-target="userInfo" data-key="password"/>
  当前密码：{{userInfo.password}}
</view>

about.js

data: {
  account:'默认',
  userInfo:{
    username:'',
    password:''
  }
},
getValueInput(e){
  console.log(e);
  // 解构赋值
  const {target,key} = e.currentTarget.dataset
  this.setData({
    [`${target}.${key}`]:e.detail.value
  })
},

二、网络请求

1、介绍

小程序通过 wx.request 函数发送请求

2、注意

若在开发过程中，请求域名非https协议，请在右上角=>详情=>本地设置=>勾选【不校验合法域名】，否则将无法发送请求

3、使用

小编使用天行数据API为例子

天行数据TianAPI - 开发者API数据平台天行数据TianAPI开发者API数据平台天聚数行，在这里您可以免费且轻松的调用各种API数据接口用于系统软件、应用App、网站、小程序开发等。https://www.tianapi.com/（1）默认GET获取方式

①about.wxml

<view class="about-page">
  <button bindtap="getRequestApi">获取数据api</button>
</view>

②about.js

getRequestApi(){
  wx.request({
    url: 'https://apis.tianapi.com/tiangou/index',
    method:'GET',
    data: { key:"a3828b7efb833ce8c26d05f10ed40e04" },
    // header: { /* 请求头 */ },
    success: res=>{
        /* 响应的回调 */
        console.log(res.data);
    },
    fail: err=>{
        /* 失败的回调 */
    }
})
},

（2）默认POST获取方式

about.js

getRequestApi(){
  wx.request({
    url: 'https://apis.tianapi.com/tiangou/index',
    method:'POST',
    data: { key:"a3828b7efb833ce8c26d05f10ed40e04" },
    header: { 'content-type':'application/x-www-form-urlencoded' },
    success: res=>{
        /* 响应的回调 */
        console.log(res.data);
    },
    fail: err=>{
        /* 失败的回调 */
    }
})
},

4、基于Promise封装

（1）在utils文件夹下新建request.js文件

// 导出一个方法
export default function (option) {
  // 设置、获取配置项
  const BASE_URL = ""
  // 解构赋值
  let { url = "", method = "GET", data = {}, header = {}, isToken = true/*默认为需要*/ } = option

  /* 请求拦截区域 */
  if (isToken) {
      // 根据接口token需求，对header添加Authorization属性
      header = {
          ...header, // 扩展运算，保留原header信息
          Authorization: wx.getStorageSync('token') // 加入token
      }
  }

  return new Promise((resolve, reject) => {
      wx.request({
          url: BASE_URL + url,
          method,
          data,
          header,
          success(res) {
              /* 响应拦截 */
              resolve(res.data) // 拆包，返回后端数据
          },
          fail(err) {
              reject(err)
          }
      })
  })
}

（2）创建api文件夹=》创建aboutApi.js=》

import instance from '../utils/request'

export function getMsg(data){
  return new instance({
    url:'/tiangou/index',
    method:"GET",
    data
  })
}

export function postMsg(data){
  return new instance({
    url:'/tiangou/index',
    method:"POSt",
    data,
    header:{
      'content-type':'application/x-www-form-urlencoded'
    }
  })
}

（3）回到about.js文件

//引入api文件
import {getMsg,postMsg} from "../../api/aboutApi.js"

getRequestApi(){
  // getMsg({key:'a3828b7efb833ce8c26d05f10ed40e04'}).then(res=>{
  //   console.log(res);
  // })
  postMsg({key:'a3828b7efb833ce8c26d05f10ed40e04'}).then(res=>{
    console.log(res);
  })
},

三、自定义组件

1、创建

（1）创建component文件夹=》创建dialog文件夹=》创建Component组件index文件

2、父向子组件通信

（1）子级index.js文件设置properties，类似vue2中的父子组件传参使用方法props

properties: {
    title:{
      type:String,
      value:'默认',
    }
  },

（2）父级about.json文件注册组件"dialog-tag":"/component/dialog/index"

{
  "component": true,
  "usingComponents": {
    "dialog-tag":"/component/dialog/index"
  }
}

（3）使用组件，在父级about.wxml文件编写，使其显示到页面上

<dialog-tag title='123'></dialog-tag>

3、子向父组件通信

（1）子级index.wxml文件设置点击事件的按钮

<view class="about-page">
  <dialog-tag title='123'></dialog-tag>
  <button bindtap="onclick">点击</button>
</view>

（2）子级index.js设置要传递的参数及点击事件

data: {
    msg:'给父级的变量',
  },
 methods: {
    onclick(){
      this.triggerEvent("myevent",this.data.msg)
    }
  }

（3）父级about.wxml添加连接事件

<view class="about-page">
  <dialog-tag title='' bindmyevent="sonClick"></dialog-tag>
</view>

（4）父级about.js点击事件获取子级内容

sonClick(e){
  console.log(e);
},

4、生命周期

（1）基本生命周期输出顺序

/**
   * 生命周期函数--监听页面加载
   * 页面第一次加载
   */
  onLoad(options) {
    console.log(1);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    console.log(2);
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    console.log(3);
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    console.log(4);
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    console.log(5);
  },

（2）更多详细生命周期看文档

组件生命周期 | 微信开放文档

四、vant weapp组件库

1、配置

（1）新建终端=》npm init=》一直回车即可

（2）下载

npm install --production

（3）下载vant

①文档：Vant Weapp - 轻量、可靠的小程序 UI 组件库

②输入下载语句

npm i @vant/weapp -S --production

（4）去除默认样式，修改默认值配置项

①将 app.json 中的 "style": "v2" 去除

②修改project.config.json，查询packNpmManually属性后修改为true

③修改project.config.json，查询packNpmRelationList添加

{
    "packageJsonPath": "./package.json",
    "miniprogramNpmDistDir": "./miniprogram/"
}

（5）构建npm

①点击工具=》构建npm=》出现如下图，即构建成功

②如果构建失败可以看这个文章的解决办法

小程序npm构建时发生错误Error: C:\Users\13914\WeChatProjects\miniprogram-2\miniprogram\ 未找到_沈思齐的博客-CSDN博客

2、使用

（1）全局app.json中导入以下代码

"usingComponents": {
  "van-button": "@vant/weapp/button/index"
},

（2）当每个页面需要使用弹出层时，就在对应页面的json文件中引入对应内容

"usingComponents": {
  "van-popup": "@vant/weapp/popup/index"
}

<van-cell title="展示弹出层" is-link bind:click="showPopup" />123s
<van-popup
  show="{{ show }}"
  position="top"
  custom-style="height: 20%;"
  bind:close="onClose"
/>

data: {
  show: true,
},
showPopup() {
  this.setData({ show: true });
},
onClose() {
  this.setData({ show: false });
},

五秒法则

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
微信小程序（二）

小程序表单绑定，数据绑定，类似数据双向绑定的封装，网络请求，基于Promise的请求封装，自定义组件，Van Weapp组件库配置及使用
复制链接

扫一扫

专栏目录

微信小程序（二）

1、input标签

一、表单绑定

1、数据绑定

2、输入获取

二、网络请求

1、介绍

2、注意

3、使用

4、基于Promise封装

三、自定义组件

1、创建

2、父向子组件通信

3、子向父组件通信

4、生命周期

四、vant weapp组件库

1、配置

2、使用

“相关推荐”对你有帮助么？