• 微信小程序小白易入门基础教程1


    微信小程序

    基本结构

    在这里插入图片描述

    页面配置

    页面配置

    app.json 中的部分配置,也支持对单个页面进行配置,可以在页面对应的 .json 文件来对本页面的表现进行配置。

    页面中配置项在当前页面会覆盖 app.json 中相同的配置项(样式相关的配置项属于 app.json 中的 window 属性,但这里不需要额外指定 window 字段),具体的取值和含义可参考全局配置文档中说明。

    文件内容为一个 JSON 对象,有以下属性:

    配置项

    属性类型默认值描述最低版本
    navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如 #000000
    navigationBarTextStylestringwhite导航栏标题颜色,仅支持 black / white
    navigationBarTitleTextstring导航栏标题文字内容
    navigationStylestringdefault导航栏样式,仅支持以下值: default 默认样式 custom 自定义导航栏,只保留右上角胶囊按钮。iOS/Android 微信客户端 7.0.0,Windows 微信客户端不支持
    backgroundColorHexColor#ffffff窗口的背景色
    backgroundTextStylestringdark下拉 loading 的样式,仅支持 dark / light
    backgroundColorTopstring#ffffff顶部窗口的背景色,仅 iOS 支持微信客户端 6.5.16
    backgroundColorBottomstring#ffffff底部窗口的背景色,仅 iOS 支持微信客户端 6.5.16
    enablePullDownRefreshbooleanfalse是否开启当前页面下拉刷新。 详见 Page.onPullDownRefresh
    onReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离,单位为px。 详见 Page.onReachBottom
    pageOrientationstringportrait屏幕旋转设置,支持 auto / portrait / landscape 详见 响应显示区域变化2.4.0 (auto) / 2.5.0 (landscape)
    disableScrollbooleanfalse设置为 true 则页面整体不能上下滚动。 只在页面配置中有效,无法在 app.json 中设置
    usingComponentsObject页面自定义组件配置1.6.3
    initialRenderingCachestring页面初始渲染缓存配置,支持 static / dynamic2.11.1
    stylestringdefault启用新版的组件样式2.10.2
    singlePageObject单页模式相关配置2.12.0
    restartStrategystringhomePage重新启动策略配置2.8.0
    • 注:并不是所有 app.json 中的配置都可以在页面覆盖或单独指定,仅限于本文档包含的选项。
    • 注:iOS/Android 客户端 7.0.0 以下版本,navigationStyle 只在 app.json 中生效。

    配置示例

    {
      "navigationBarBackgroundColor": "#ffffff",
      "navigationBarTextStyle": "black",
      "navigationBarTitleText": "微信接口功能演示",
      "backgroundColor": "#eeeeee",
      "backgroundTextStyle": "light"
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    数据绑定

    
    
    {{msg}}
    
    
    
    {{num}}
    
    
    
     是否{{isGirl}}
    
    
    
     {{person.age}}
    
     {{person.height}}
    
     {{person.name}}
    
    自定义属性
    
    
    
    
    
    
    
    
    
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    js

     data: {
         msg:"hello ",
         num:"1000",
         isGirl:false,
         person:{
           age:18,
           height:1.75,
           weight:200,
           name:"wagn"
         }
       },
         ischecked:false
     
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    运算表达式

    列表循环和对象

    列表循环
    wx:for=“{{数组或者对象}}”
    wx: for item=" 循环项的名称”wx: for - index=" 循环项的索引”

    1 wx:for=“{{数组或者对象}}” Wx: for- item=“循环项的名称” wX: for- index=”循环项的索引”
    2 wx:key=“唯一 的值"用来提高列表渲染的性能
    1 wx:key 绑定一个普通的字符串的时候那么这个字符串名称肯定是循环数组中的对象的唯一 属性
    2 wx:key =”*this" 就表示你的数组是一个普通的数组 *this 表示是循环项
    [1,2,3,44, 5]
    [“1”,“222”,“adfdf”]
    3当出现数组的嵌套循环的时候尤其要注意 以下绑定的名称不要重名
    wx:for - item=" item" Wx: for- index=" index"
    4默认情况下我们不写
    wX: for- item=" item" wx: for- index=" index"
    小程序也会把循环项的名称和索引的名称item 和index
    只有一层循环的话

    ( wx:for-item=“item” wx:for-index=“index”) 可以省略

     <view wx:for="{{list}}"
       wx:for-item="item" 
       wx:for-index="index"
       wx:key="id"> 
    索引{{index}}
    数值{{item.name}}
    view>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    对象循环

    1 wx:for=“{{对象}}” wx:for- item="对象的值” wx: for- index=“对象的属性”
    2循环对象的时候最好把item和index的名称都修改一下
    wx: for- item=“value”
    Wx: for- index=“key”

    代码

    
    属性{{key}}
    值{{value}}
    
    
    
    
     person:{
           age:18,
           height:1.75,
           weight:200,
           name:"wagn"
         },
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    条件渲染

    11条件渲染
    1 wx:if=“{{true/false}}”
    2 if
    ,else,if else
    wx:if
    wx:elif
    wx:else

    显示
    隐藏
    no
    
    • 1
    • 2
    • 3
    hidden

    什么场景下用哪个
    1当标签不是频繁的切换显示优先使用wx:if
    直接把标签从页面结构给移除掉
    2当标签频繁的切换显示的时候优先使用_ hidden
    通过添加样式的方式来切换显示

    
    
    
    
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    事件绑定

    // pages/demo03/demo03.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        num:0
      },
        handleinput(e){
          this.setData({
            num:e.detail.value
          })
        },
        handletap(e){
          //获取自定义属性operaction
         const {operaction} = e.currentTarget.dataset;
         console.log(operaction);
         this.setData({
          num:this.data.num + operaction
        })
        }
      
    
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    小程序事件绑定

    需要给input标签绑定input事件
    绑定关键字bindinput
    2如何获取输入框的值
    通过事件源对象来获取
    e. detail. value
    3把输入框的值赋值到data当中
    不能直接
    1 this. data . num=e . detail. value
    2 this . num=e . detail . value
    正确的写法
    this. setData({
    num:e . detail. value
    })
    4需要加入一个点击事件
    1 bindtap
    2无法在小程序当中的事件中直接传参
    3通过自定义属性的方式来传递参数
    4事件源中获取自定义属性

    rpx

    尺寸单位

    拿以上的需求去实现不同宽度的页面适配
    page px = 750 rpx
    1px=750rpx/page
    100px=750rpx*100/page
    假设
    page
    375px
    利用一个属性calc属性
    CSS和wxss 都支持一个属性
    750和rpx中间不要留空格
    运算符的两边也不要留空格

    view{
      /* width: 200rpx; */
      height: 200rpx;
      font-size: 40rex;
      background-color: #454659;
      width:calc(750rpx * 100 / 375px);
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    样式导⼊

    wxss中直接就⽀持,样式导⼊功能。

    也可以和 less中的导⼊混⽤。

    使⽤ @import

    语句可以导⼊外联样式表,只⽀持相对路径

    ⼩程序中使⽤less

    原⽣⼩程序不⽀持 less

    ,其他基于⼩程序的框架⼤体都⽀持,如 wepy mpvue , taro

    等。

    但是仅仅因为⼀个less功能,⽽去引⼊⼀个框架,肯定是不可取的。因此可以⽤以下⽅式来实现

    \1. 编辑器是 vscode

    \2. 安装插件 easy less

    \3. 在vs code的设置中加⼊如下,配置
    在这里插入图片描述

    \4. 在要编写样式的地⽅,新建 less

    ⽂件,如 index.less

    ,然后正常编辑即可。

    常见组件

    布局组件

    view,text,rich,text,button,image,navigator,icon,swiper,radio,checkbox

    view

    代替 原来的 div 标签

    swiper

    默认宽度 100% ⾼度 150px

    在这里插入图片描述

    <swiper autoplay interval="1000" circular indicator-dots="ture" indicator-active-color="pink">
    
    <swiper-item><image mode="widthFix" src="./img/lun.jpg/"/>swiper-item>
    <swiper-item><image mode="widthFix" src="./img/lun-1.png/"/>swiper-item>
    <swiper-item><image mode="widthFix" src="./img/lun-2.jpg/"/>swiper-item>
    swiper>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    navigator

    导航组件

    默认换行

    在这里插入图片描述

    open-type 有效值

    navigate 有返回

    redirect无返回

    在这里插入图片描述

    rich-text 富文本标签

    类似v-html

    nodes属性
    使用
    demo07.wxml
    1.标签字符串
    ">
    2.对象数组
    
    
    
    demo07.js
    data: {
           nodes: [{
               name: 'div',
               attrs: {
                 class: 'div_class',
                 style: 'line-height: 60px; color: red;'
              },
               children: [{
                 type: 'text',
                 text: 'Hello World!'
              }]
            }]
      
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    icon

    
      
        
      
     
      
        
      
     
      
        
      
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    data: {
           iconSize: [20, 30, 40, 50, 60, 70],
           iconType: [
             'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
       'download', 'search', 'clear'
          ],
           iconColor: [
             'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
          ],
        },
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    lass=“group”>



    
    
    
    
    • 1
    • 2
    • 3

    data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconType: [
    ‘success’, ‘success_no_circle’, ‘info’, ‘warn’, ‘waiting’, ‘cancel’,
    ‘download’, ‘search’, ‘clear’
    ],
    iconColor: [
    ‘red’, ‘orange’, ‘yellow’, ‘green’, ‘rgb(0,255,255)’, ‘blue’, ‘purple’
    ],
    },

    
    
    • 1
  • 相关阅读:
    南大通用GBase8s 常用SQL语句(239)
    代码随想录训练营第29天|LeetCode 491.递增子序列、46.全排列、47.全排列 II
    小米12sultra支持ip68级防水吗 小米12sultra有光学变焦吗
    Derby数据库
    解决宿主机ssh连接ubuntu虚拟机报错的问题
    Redis主从配置
    房地产,数字化疾行
    iNFTnews | 互联网巨头「百度」的元宇宙应用场景探索
    js实现pdf、word、excel、图片、html文件预览及下载
    【Unity3D日常开发】Unity3D中打包WEBGL后读取本地文件数据
  • 原文地址:https://blog.csdn.net/weixin_51627264/article/details/136666340