一位微信小程序萌新的学渣笔记(三）基础语法之常见组件

最新推荐文章于 2022-02-22 14:56:10 发布
最新推荐文章于 2022-02-22 14:56:10 发布
阅读量427 收藏
点赞数 2
分类专栏： 微信小程序 文章标签： html vue javascript 云开发 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IntMain45/article/details/113394205
版权

文章目录

常见组件

view

  1. hover-class 指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果
  2. hover-stop-propagation 指定是否阻止本节点的祖先节点出现点击态
  3. hover-start-time 按住后多久出现点击态，单位毫秒
  4. hover-stay-time 手指松开后点击态保留时间，单位毫秒

text

  1. 文本标签
  2. 只能嵌套text
  3. 长按文字可以复制（只有这个标签有这个功能）
  4. 可以对空格 回车 进行编码
属性值类型默认值说明
selectableBooleanfalse文本是否可选
decodeBooleanfalse是否解码
<!--
  1 长按文字复制 selectable
  2 对文本内容 进行 解码
-->
<text selectable decode>
  text
  &nbsp;
  123
</text>
<text selectable decode>
  text&nbsp;123&lt;
</text>

在这里插入图片描述

image

属性名类型默认值说明
srcString图片资源地址
modeString‘scale ToFIll’图片裁剪、缩放的模式
lazy-loadBooleanfalse图片懒加载

mode有效值：
mode 有13中模式，其中4种是缩放模式，9种事裁剪模式。

<!--pages/demo07/demo07.wxml-->
<!-- 
  image 图片标签
  1 src 指定要加载的图片的路径
    图片存在默认的宽度和高度 320 * 240
  2 mode 决定 图片内容 如何 和 图片标签 宽度 做适配
    1 scaleToFill 默认值 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
    2 aspectFit 保持宽高比 确保图片的长边 显示出来  页面轮播图  常用
    3 aspectFill 保持纵横比缩放图片 只保证图片的 短 边能完全显示出来  少用
    4 widthFix 宽度不变 高度自动变化 保持原图的宽高比不变 常用
    （以前web中的图片的 宽度指定了之后 高度 会自己按比例来调整）
    5 bottom......类似以前的background-position
  3 小程序中的图片 直接支持 懒加载 lazy-load
    1 lazy-load 会自己判断 当图片  出现在视口 上下 三屏的高度 之内的时候 自己开始加载图片
 -->
<image mode="widthFix" src="https://s3.ax1x.com/2021/02/15/y6QXk9.jpg">

//图片已经上传到图床上的
</image>

在这里插入图片描述

image{
  box-sizing:border-box;
  border:1px solid red;

  width:300px;
  height: 500px;
}

scaleToFill
在这里插入图片描述

aspectFit
在这里插入图片描述

aspectFill
在这里插入图片描述

widthFix
在这里插入图片描述

swiper

<!--
   1 轮播图外层容器 swiper
   2 每一个轮播项 swiper-item
   3 swiper标签 存在默认的样式
     1 width 100%
     2 height 150px image 存在默认高度和宽度 320 * 240
     3 swiper 高度 无法实现由内容撑开的
    4 先找出来原图的宽度和高度 等比例 给swiper 定 宽度和高度 
      原图的宽度和高度 1125 * 352 px
      swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度 
      swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度
      height ： 100% 或 750rpx 或  100wx * 352 px / 1125px
    5 autoplay 自动轮播
    6 interval 自动修改时间
    7 circular 衔接轮播
    8 indicator-dots 显示 指示器 分页器 索引器
    9 indicator-color 指示器的未选择的颜色
    10 indicator-active-color 选中的时候的指示器的颜色
-->
<swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
  <swiper-item><image mode="widthFix" src="image/test1.jpg"></image></swiper-item>
  <swiper-item><image mode="widthFix" src="image/test2.jpg"></image></swiper-item>
  <swiper-item><image mode="widthFix" src="image/test3.jpg"></image></swiper-item>
  <swiper-item><image mode="widthFix" src="image/test4.jpg"></image></swiper-item>
</swiper>


/* pages/demo10/demo10.wxss */
swiper{
  width: 100%;
  height: calc(100vw * 352 / 1125 ); 
  
}
image{
  width: 100%;
}

在这里插入图片描述

navigator

<!-- 
  导航组件 navigator
  0 块级元素 默认会换行 可以直接加宽度和高度
  1 url 要跳转的页面路径 绝对路径 相对路径
  2 target 要跳转到当前的小程序 还是其他的小程序的页面
    self 默认值 自己的小程序的页面
    miniProgram 其他的小程序的页面
  3 open-type 跳转方式  
    1 navigate 默认值 保留当前页面，跳转到应用内的某个页面，但是不能跳到tabbar 页面
    2 redirect 关闭当前页面 跳转到应用内的某个页面，但是不能跳到tabbar 页面
    3 switchTab 跳转到tabBer 页面 ，并关闭其他所有非 tabBar 页面
    4 reLaunch 关闭所有页面，打开到应用内的某个页面
    5 navigateBack 关闭当前页面，返回上一页面或多级页面，可通过getCurrentPages() 获取当前的页面栈，决定需要返回几层
    6 exit 退出别人的小程序，target="miniProgram"时生效
 -->

 <navigator url="/pages/demo10/demo10">轮播图页面</navigator>
 <navigator url="/pages/index/index">直接跳转到tabbar页面 跳转不了</navigator>
 <navigator open-type="redirect" url="/pages/demo10/demo10">轮播图页面 redirect</navigator>
 <navigator open-type="switchTab" url="/pages/index/index">switchTab 直接跳转到 tabBer 页面</navigator>
 <navigator open-type="reLaunch" url="/pages/index/index">reLaunch 可以随便跳转</navigator>

rich-text 富文本标签

能够把html中的语言 转化为小程序的语言

// pages/demo12/demo12.js
Page({
  data: {
  // 1 标签字符串 最常用的
  // html 中复制的是 淘宝触屏版页面中的一段 
  //   html:'淘宝触屏版页面中的一段代码'
  // 2 对象数组
  html:[
    {
      // 1 div 标签 name属性来指定
      name:"div",
      // 2 标签上有哪些属性
      attrs:{
        //标签上的属性 class style 
        class:"my_div",
        style:"color:red;"
      },
      // 3 子节点 children 要接收的数据类型和nodes 第二种渲染方式的数据类型一致
      children:[
        {
          name:"p",
          attrs:{},
          // 放文本
          children:[
          {
            type:"text",
            text:"hello"
          }
        ]
        }
      ]
    }
  ]
}
})

<!-- 
  rich-text 富文本标签
  1 nodes 属性来实现
   1 接收标签字符串
   2 接收对象数组
 -->
 <rich-text nodes="{{html}}"></rich-text>

button

// pages/demo13/demo13.js
Page({
    //获取用户的手机号码信息
    getphonenumber(e){
      console.log(e);
    },
    //获取用户个人信息
    getUserInfo(e){
      console.log(e);
    }
})

<!-- 
  button 标签
  1 外观的属性
   1 size 控制按钮的大小的
     1 default 默认大小
     2 mini 小尺寸
  2 type 用来控制按钮的颜色
    1 default 灰色
    2 primary 绿色
    3 warn 红色
  3 plain 按钮是否镂空 背景色透明
  4 loading 是否在名称前面 加一个等待图标
 -->
 <button>默认按钮</button>
 <button size="mini">mini默认按钮</button>
 <button type="primary">primary 默认按钮</button>
 <button type="warn">warn默认按钮</button>
 <button type="warn" plain>plain 按钮</button>
 <button type="primary" loading >loading 按钮</button>


<!-- 
   button 开发能力
   open-type :
   1 contact 直接打开 客服对话功能 需要在微信小程序的后台配置
   2 share 转发当前的小程序 到微信朋友中  不能把小程序 分享到 朋友圈中
   3 getPhoneNumer 获取当前用户的手机号码信息 结合一个事件来使用 不是一个企业的小程序帐号 没有权限来获取用户的手机号码
     1 绑定一个事件 bindgetphonenumber
     2 在事件的回调函数中  通过参数来获取信息
     3 获取到的信息 已经加密过了
      需要用户自己搭建小程序的后台服务器， 在后台服务器中进行解析 手机号码。返回到小程序中 就可以看信息了
   4 getUserInfo 获取当前用的个人信息
     1 使用方法 类似 获取用户的手机号码
     2 可以直接获取 不存在加密的字段
   5 launchApp 在小程序当中 直接打开 app
     1 需要先在 app中 通过app中的某个链接 打开 小程序
     2 在小程序中 再通过这个功能 重新打开app
     3 找到 京东的app 和 京东的小程序 
   6 openSetting 打开小程序内置的 授权页面
     1 授权页面中 只会出现 用户曾经点击过的 权限 
   7 feedback 打开 小程序内置的 意见反馈页面
     1 只能够通过真机调试来打开 跟 contact 类似
     
 -->
<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getphonenumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetUserInfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>

在这里插入图片描述
open-type的contact 的实行流程

  1. 小程序的appid 由测试号改为自己的appid
  2. 登录微信小程序官网，添加 客服- 微信
  3. 准备两个帐号
    普通用户a
    客服-微信b
  4. 用普通用户a进行扫码
  5. 点击contact按钮 就可以与客服号交流

icon

在这里插入图片描述

<!-- 
  小程序中的字体图标
  1 type 图标中的类型
    success|success_no_circle|infowarn|waiting|cancel|download|search|clear
  2 size 大小
  3 color 图标的颜色
 -->
 <icon type="success" size="23" color="red">

 </icon>

radio

// pages/demo14/demo14.js
Page({
  data: {
    gender:""
  },
  handleChange(e)
  {
    // 1 获取单选框中的值
    let gender=e.detail.value;
    // 2 把值赋值给data中的数据
    this.setData({
        //gender:gender 相当于
        gender})
  }
})

 <!-- 
   radio 单选框
   1 radio标签 必须要和 父元素 radio-group 来使用
   2 value 选中的单选框的值
   3 需要给radio-group 绑定 change 事件
   4 需要在页面中显示 选中的值
  -->
  <radio-group bindchange="handleChange">
    <radio color="red" value="male">男</radio>
    <radio color="pink" value="female">女</radio>
  </radio-group>
  <view>您选中的是:{{gender}}</view>

在这里插入图片描述

checkbox

<!-- 

 -->
 <view>
   <checkbox-group bindchange="handleItemChange">
     <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
        {{item.name}}
     </checkbox>
   </checkbox-group>
   <view>
   选中的水果：{{checkedList}}
  </view>
 </view>


// pages/demo15/demo15.js
Page({
  data: {
    list:[
      {
        id:0,
        name:"苹果",
        value:"apple"
      },
      {
        id:1,
        name:"葡萄",
        value:"grape"
      },
      {
        id:2,
        name:"香蕉",
        value:"bananer"
      }
    ],
    checkedList:[]
  },
  
  //复选框的选中事件
  handleItemChange(e){
    // 1 获取被选中的复选框的值
    const checkedList=e.detail.value;
    // 2 进行赋值
    this.setData({
      checkedList
    })
  }
})

在这里插入图片描述

自定义组件

创建自定义组件

在这里插入图片描述

步骤

  1. 现在pages同层级目录下新建一个components的文件夹 components内新建Tabs文件夹 Tabs新建Tabs 组件文件js json wxml wxss
    在这里插入图片描述
    在这里插入图片描述
// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})


// components/Tabs/Tabs.json
{
  "component": true,
  "usingComponents": {}
}

<!--components/Tabs/Tabs.wxml-->
<text>components/Tabs/Tabs.wxml</text>


/* components/Tabs/Tabs.wxss */
  1. 在要使用的页面的json文件中写代码
// pages/demo16/demo16.json
{
  "usingComponents": {
    "Tabs":"../../components/Tabs/Tabs"
  }
}
  1. 在页面中当成一个普通标签使用即可
<!-- 

 -->
<Tabs>
  
</Tabs>

实例实现

在这里插入图片描述

标题激活选中 + Tabs 样式优化
<!--components/Tabs/Tabs.wxml-->
<view class="tabs">
  <view class="tabs_title">
    <!-- <view class="title_item">首页</view>
    <view class="title_item">原创</view>
    <view class="title_item">分类</view>
    <view class="title_item">关于</view> -->
    <view 
    wx:for="{{tabs}}"
    wx:key="id"
    class="title_item {{item.isActive?'active':''}}"
    bindtap="handleItemTap"
    data-index="{{index}}"
    >
  {{item.name}}
  </view>
  </view>
  <view class="tabs_content">内容</view>
</view>

// components/Tabs/Tabs.js
Component({
  /**
   * 里面存放的是 要从父组件中接收的数据
   */
  properties: {
  
  },

  /**
   * 组件的初始数据
   */
  data: {
    tabs:[
    {
      id:0,
      name:"首页",
      isActive:true
    },
    {
      id:1,
      name:"原创",
      isActive:false
    },
    {
      id:2,
      name:"分类",
      isActive:false
    },
    {
      id:3,
      name:"关于",
      isActive:false
    }
    ]
  },

  /**
   1 页面.js 文件中 存放事件回调函数的时候 存放在data同层级下！！！
   2 组件.js 文件中 存放事件回调函数的时候 必须要存放在methods中！！！
   */
  methods: {
    handleItemTap(e){
      /*
      1 绑定点击事件 需要在methods中绑定
      2 获取被点击的索引
      3 获取原数组
      4 对数组循环
        1 给每一个循环性 选中属性 改为false
        2 给 当前的 索引的 项 添加激活选中效果就可以了！！！
      */
     // 2 获取索引
      const {index}=e.currentTarget.dataset;
      // 3 获取data中的数组
      // 解构 对 复杂类型进行解构的时候 复制了一份 变量的引用而已
      // 最严谨的做法 重新拷贝一份 数组，再对这个数组的备份进行处理，
      // let tabs=JSON.parse(JSON.stringify(this.data.tabs)); 深拷贝
      // 不要直接修改 this.data.数据 
     // let {tabs}=this.data;=   let tabs=this.data.tabs;
      let tabs=this.data.tabs;
      // 4 循环数组
      // [].forEach 遍历数组 遍历数组的时候 修改了 v. 也会导致源数组被修改
      tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
      this.setData({
        tabs
      })

    }
  }
})


/* components/Tabs/Tabs.wxss */
.tabs{}
.tabs_title{
  display: flex;
  padding:10rpx 0;
}
.title_item{
  flex:1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active{
  color: red;
  border-bottom: 5px solid currentColor;
}
.tabs_content{}

在这里插入图片描述

父向子传递数据

原理👇

1 父组件wxml

<!-- 
    1 父组件（页面）传递数据 通过 标签属性的方式来传递
      1 在子组件上进行接收 
 -->
<Tabs aaa="a123b">

</Tabs>

2 子组件js

// components/Tabs/Tabs.js
Component({
  /**
   * 里面存放的是 要从父组件中接收的数据
   */
  properties: {
    // 要接受的数据的名称
    aaa:{
      // type 要接收的数据的类型
      type:String,
      //value 默认值
      value:""
    }
  },

})

3 子组件的wxml

<view>{{aaa}}</view>

在这里插入图片描述

步骤 👇

  1. 将子组件.js中的data数据 剪切到父组件的data数据中
// pages/demo16/demo16.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:"首页",
        isActive:true
      },
      {
        id:1,
        name:"原创",
        isActive:false
      },
      {
        id:2,
        name:"分类",
        isActive:false
      },
      {
        id:3,
        name:"关于",
        isActive:false
      }
      ]
  }
})
  1. 在父组件wxml中传递数据
<!-- 
    1 父组件（页面）传递数据 通过 标签属性的方式来传递
      1 在子组件上进行接收 
 -->
<Tabs tabs="{{tabs}}">
</Tabs>
  1. 子组件js中存放要从父组件中接收的数据
// components/Tabs/Tabs.js
Component({
  /**
   * 里面存放的是 要从父组件中接收的数据
   */
  properties: {
    tabs:{
      type:Array,
      value:[]
    }
  }
)}
  1. 子组件的wxml中
<view class="tabs">
  <view class="tabs_title">
    <view 
    wx:for="{{tabs}}"
    wx:key="id"
    class="title_item {{item.isActive?'active':''}}"
    bindtap="handleItemTap"
    data-index="{{index}}"
    >
  {{item.name}}
  </view>
  </view>
  <view class="tabs_content">内容</view>
</view>

效果是一样的
在这里插入图片描述

子向父传递数据

在这里插入图片描述
需要改造代码

  1. 修改子组件.js中的handleItemTap的代码
    原先代码是写死的 不能修改父组件中的数据 换成触发父组件中的事件来修改数组 关键在于父组件自定义事件的名称itemChange和要传递的参数index
// components/Tabs/Tabs.js
Component({
  /**
   * 里面存放的是 要从父组件中接收的数据
   */
  properties: {
    tabs:{
      type:Array,
      value:[]
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
  },
  methods: {
    handleItemTap(e){
      /*
      1 绑定点击事件 需要在methods中绑定
      2 获取被点击的索引 
      3 点击事件触发的时候
       触发父组件中的自定义事件 同时传递数据给 父组件
       this.triggerEvent("父组件自定义事件的名称"，要传递的参数)
      */
      
     // 2 获取索引
      const {index}=e.currentTarget.dataset;
     // 3 触发父组件中的自定义事件 同时传递数据给 父组件
      this.triggerEvent("itemChange",{index});
    }
  }
})
  1. 在父组件.wxml中绑定一个事件
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange">
</Tabs>
  1. 在父组件.js中的实现handleItemChange事件
// pages/demo16/demo16.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:"首页",
        isActive:true
      },
      {
        id:1,
        name:"原创",
        isActive:false
      },
      {
        id:2,
        name:"分类",
        isActive:false
      },
      {
        id:3,
        name:"关于",
        isActive:false
      }
      ]
  },
  //自定义事件 用来接收子组件传递的数据的
  handleItemChange(e){
    // 接收传递过来的参数
    const {index}=e.detail;
    //以下代码从之前子组件.js的实现代码中复制过来
    let tabs=this.data.tabs;
  
    tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
    this.setData({
      tabs
    })
  }
})

实现功能👇在这里插入图片描述

slot
  1. 在子组件的wxml文件中
<view class="tabs">
  <view class="tabs_title">
    <view 
    wx:for="{{tabs}}"
    wx:key="id"
    class="title_item {{item.isActive?'active':''}}"
    bindtap="handleItemTap"
    data-index="{{index}}"
    >
  {{item.name}}
  </view>
  </view>
  <view class="tabs_content">
    <!-- 
      slot 标签 其实就是一个占位符 插槽
      等到 父组件调用 子组件的时候 再传递 标签过来 最终 这些被传递的标签
      就会替换 slot 插槽的位置
     -->
     <slot>
     </slot>
  </view>
</view>
  1. 对于父组件.wxml
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange">
  <block wx:if="{{tabs[0].isActive}}">0</block>
  <block wx:elif="{{tabs[1].isActive}}">1</block>
  <block wx:elif="{{tabs[2].isActive}}">2</block>
  <block wx:else="{{tabs[3].isActive}}">3</block>
</Tabs>

页面效果👇在这里插入图片描述
在这里插入图片描述

组件的其他属性

在这里插入图片描述

IntMain45
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序二、基础语法和常用样式
瑶山的博客
08-30 257
目录 WXML基础语法 标签 数据绑定 列表遍历 条件判断 模板（template） WXSS常用样式 全局 局部设置以及效果 WXML基础语法 标签 视图容器(View Container) view 视图容器 scroll-view 可滚动视图容器 swiper 可滑动的视图容器 基础内容(Basic Content) icon 图标 text 文字 progress 进度条 表单组件(Form) bu...
微信小程序自定义组件Component的使用
热门推荐
Ho博客
07-25 7万+
前言 之前有一篇博文介绍了小程序中模板template的使用。在使用的时候，虽然可以实现与组件相同的显示功能，但是template没有自己的生命周期，在操作模板上的控件时，事件的传递不好处理，而这些不方便都可以通过组件component来代替，先看一波效果图。 实现 1.创建component组件 首先如上图创建components文件夹，home-item就是最上面效果图的条...
微信小程序的基础语法（必看）
MYmayue的博客
10-19 8842
1. 简述微信小程序的运行机制 热启动 ：假如⽤户已经打开了某个⼩程序，在⼀定时间内再次打开⼩程序的话，这个时候我们就不再需要重新启动了，这需要把我们的后台打开的⼩程序切换到前台来使⽤。 冷启动：⽤户⾸次打开⼩程序或被微信主动销毁再次打开的情况，此时⼩程序需要重新加载启动。 2. 分析一下小程序的优劣势 优势： 无需下载，通过搜索和扫一扫就可以打开 良好的用户体验：打开速度快 开发成本比App要低 安卓上可以添加到桌面，与原生App差不多 为用户提供良好
微信小程序 基础语法
yanyanforest的专栏
11-16 1万+
微信小程序 基础语法列表渲染<view wx:for="{{array}}">{{item}}</view> 条件渲染<view wx:if="{{logged}}">登录</view> <view wx:else>未登录</view> 这里需要注意一下：如果好几个判断中间是 elif#
微信开发者小程序
口袋的天空的博客
03-18 8104
微信开发者小程序 一.环境准备 1.注册账号 建议使用全新的邮箱，没有注册过其他小程序或者公众号的。因为每个邮箱只能申请一个小程序。 注册链接 2.获取APPID 这个APPID相当于开发者唯一的身份验证。 注册成功以后，在微信公众平台获取APPID。 3.开发工具 ...
【微信小程序---标题激活选中流程】
m0_56349322的博客
02-22 268
想要实现效果 自定义组件样式components>Tabs>Tabs.wxml <view class="tabs"> <view class="tabs_title"> <view wx:for="{{tabs}}" wx:key="id" class="title_item {{item.isActive?'active':''}}" bindtap="handleIt..
微信小程序学习笔记（6）--------组件
zsp45212的专栏
12-08 696
小程序组件
微信小程序（三）常见组件
YogaLin_qwq的博客
07-28 1217
常见组件 view ​ 相当于web里的div标签 text ​ 1.文本标签 ​ 2.只能嵌套text ​ 3.长按文字可以复制（只有该标签有这个功能） ​ 4.可以对空格(&nbsp)回车进行编码 <text selectable="{{false}}" decode="{{false}}"> 普&nbsp;通 </text> img ​ |默认宽度320px、⾼度240px ​ |支持懒加载（ 延时加载，即当对象需要用到的时候再去加载 ，当图
微信小程序第二章 基础组件switch组件
11-06
微信小程序第二章 基础组件switch组件
微信小程序日期年月日范围选择的组件
最新发布
01-18
适用于微信小程序的组件，主要是选择年月日的范围，可通过箭头选择上一年下一年，上一月下一月。并进行了日期校验，若开始日期晚于结束日期，则回自动切换开始日期为结束日期，同时，结束日期变为开始日期。 可以...
微信小程序——云笔记（截图+源码）.zip
05-05
微信小程序——云笔记（截图+源码）.zip 微信小程序——云笔记（截图+源码）.zip 微信小程序——云笔记（截图+源码）.zip 微信小程序——云笔记（截图+源码）.zip 微信小程序——云笔记（截图+源码）.zip 微信小程序...
微信小程序第二章 基础组件picker组件（一）
11-06
微信小程序第二章 基础组件picker组件（一）
微信小程序学习（五）——自定义组件
weixin_45927758的博客
07-15 982
类似于页面，一个自定义组件由json,wxml,wxss,js四个文件组成。 创建自定义组件的文件夹 先新建一个components文件夹（和pages文件夹同层级），再在文件夹中创建一个文件夹，里面新建与第二层文件夹同名的文件，并更改文件名后缀为.wxss或者其他三个，就会自动生成一个自定义的组件。 想在页面中使用自定义组件的时候，就在页面配置.json文件中添加引用代码 { "usingComponents": { "Tabs":"../../components/Tabs/.
一位微信小程序萌新的学渣笔记(一）微信小程序前后端分离了解+微信小程序前端学习
IntMain45的博客
01-29 5496
思维导图 前端 vue/react vue是渐进式的JavaScript框架 js框架 css3 h5 后端 控制器 python(django) nodejs java php c++ c# 数据库 mysql mogodb 后端完整框架 技术栈 ubuntu 阿里云ubuntu下载 mysql Django DjangoRestFrame uwsgi nginx apache restfulapi规范 postman 域名 阿里云 腾讯云 ...
一位微信小程序萌新的学渣笔记(五）towxml的小白教程——简单高效的将md文档转化为wxml网页
IntMain45的博客
02-19 2888
前言 将md文档的内容转化为wxml网页 减少wxml的书写 使用的是towxml工具 实在是太太太小白了 小白到用了两天的时间去实现这个功能呜呜呜 又白又菜 简称小白菜 写个博客记录一下 本篇博客将讲述如何简单的将md文档储存在云开发上再转化为wxml页面 towxml的介绍 Towxml 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。 用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。 特色 可控制的音频播放器（.
一位微信小程序萌新的学渣笔记(二）基础语法之模板语法
IntMain45的博客
02-02 697
dasfadsfsa
一位微信小程序萌新的debug记录——微信小程序体验版数据加载不了
IntMain45的博客
02-27 619
towxml页面在小程序体验版加载不了数据，只有打开调试模式才能加载数据 因为我在小程序中请求了用域名表示的数据，但是我没有配置域名 // //声明Markdown文件目录路径 docDir: 'https://xxxx.tcb.qcloud.la/', 详细可见 一位微信小程序萌新的学渣笔记(五）towxml的小白教程——简单高效的将md文档转化为wxml网页 域名配置地址 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值