小程序第二集依旧简简单单

最新推荐文章于 2024-08-09 07:41:37 发布

SaiKa563

最新推荐文章于 2024-08-09 07:41:37 发布

阅读量473

点赞数

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

本文链接：https://blog.csdn.net/qq_61896295/article/details/126696900

版权

书接上文

你有v-if 我有wx:if

条件渲染
wx:if=“{{}}”
wx:elif=“{{}}”
ex:else
列表渲染
wx:for=“{{list}}” wx:key=“title”
自定义列表
wx:for=“{{list}}”
wx:for-item=“myitem” {{myitem}}
wx:for-index=“ind” {{ind}}
注意：微信的循环默认为item，你要用别的名字自能用自定义列表

import

定义模板 test.wxml

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

使用

<import src="xxx/test.wxml">
<template is="use" data={{...userInfo}}>

表单的双向绑定

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

事件的传参数

//html
<button bindtap="showMsg" data-msg=“你好”>
//js事件
ja:showMsg(e){
     e.target.dataset.msg
}

视图的更新

his.setData({temp:''})   
//只要数据改变，视图就应该更新

微信的api 重点来了家人们

wx.showToast({title:“”,icon:})	弹出框
wx.showLoading()	加载提示
wx.request()	网络请求
wx.stopPullDownRefresh()	停止下拉刷新
wx.setStorageSync(key,value)	本地数据的存储
wx.getStorageSync(key)	本地数据的获取

配置里的小重点 xxxx.json

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

生命周期谁都有

onLoad 页面加载
onPullDownRefresh 下拉刷新
onReachBottom 触底

自定义组件

创建一个组件
在页面中注册组件

"usingComponents": {
   "item":"/components/item/item"
 }
 //html
 <item></item>

组件的构造函数 Component

externalClasses 外部类
properties: 父组件传入的属性（参数）
data 组件内部的数据
methods 组件的方法

组件的传参

父传子

父页面
子组件接收

properies：{
  title:{type:String,value:''}
}

子组件页面wxml使用 {{title}}
子组件js的methods中使用 this.data.title

子传父

子组件js ：this.triggerEvent(“toggle”,{value:true})
父组件 wxml ：
父组件.js：toggleHd(e){ //获取 e.detial.value}

外部类

子组件.js ：externalClasses:[item-class]
子组件.wxml ：
父组件wxml传入：
父组件.wxss ：.myItem{ height:100rpx !important!;color:red;}

分包你不会就是不懂小程序

//app.json 全局配置
"subpackages": [
    {
      "root": "news",
      "pages": [
        "pages/detail/detail"
      ]
    }
  ],
  "preloadRule": {
    "pages/jok/jok": {
      "network": "all",
      "packages": [
        "news"
      ]
    }
  },