周亚博的个人博客

  • 首页
  • 盛夏光年
  • 陪风去荡
  • 布响丸啦
我频繁记录着 因为生活值得
  1. 首页
  2. 盛夏光年
  3. 正文

初识小程序开发

2022-08-18 97点热度 0人点赞 0条评论

一、小程序开发

1、小程序开发的不同点
  • 运行环境不同:小程序是运行在微信环境中
  • API不同:小程序无法调用DOM和DOM的API
  • 开发环境不同:小程序开发需要开发账号和开发者工具
2、适配方案
  • 适配单位:rpx
  • 规定任何屏幕下的宽度为750px
  • 自动根据屏幕宽度不同计算rpx的大小
  • Iphone6下,1rpx = 1物理像素 = 0.5px

二、项目的基本结构

1、整体结构

image-20220817201401649

  • pages:用于存放所有的小程序页面
  • utils:存放所有的工具模块
  • app.js:整个项目的入口文件,App()必须在app.js中调用,且只能调用一次
  • app.json:项目的全局配置文件
  • app.wxss:项目的全局样式文件
  • project.config.json:项目的配置文件
  • sitemap.json:配置小程序及其页面是否允许被微信索引
2、小程序页面的组成部分

官方建议将所有的页面都存放在pages文件夹中,以单独的文件夹的形式存在

image-20220817201925002

每个页面文件夹由四个文件组成:

  • .js文件:页面的脚本文件,存放页面的数据,时间处理逻辑。Page({})
  • .json文件:页面的配置文件,配置页面的外观和表现
  • .wxml文件:页面的模板结构文件
  • .wxss文件:页面的样式表文件
3、json配置文件

小程序中有四种配置文件,可以对小程序进行不同级别的设置

小程序项目中有四种不同的配置文件,分别是:

  • 项目根目录中的app.json配置文件
    {
    "pages":[
      "pages/index/index",
      "pages/logs/logs"
    ],
    "window":{
      "backgroundTextStyle":"light",
      "navigationBarBackgroundColor": "#fff",
      "navigationBarTitleText": "Weixin",
      "navigationBarTextStyle":"black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
    }
    
    
  • 项目根目录中的project.config.json配置文件

  • 项目根目录中的sitemap.json配置文件

  • 每个页面文件夹下的配置文件

三、wxml语法

1、数据绑定

初始化数据

Page({
  data: {
    message: 'Hello'
  }
})

使用数据

<view> {{ message }} </view>

修改数据

1、this.setData({message:'修改后的数据', callback})

2、特点

  • 同步修改
  • 异步更新
// index.js
Page({
  data:{
    text: 'init data',
    num: 0,
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function(){
    // 不要直接修改this.text
    this.setData({
      text: 'change data'
    })
  }
})
2、事件绑定

事件分类

  • 冒泡事件
  • 非冒牌事件

绑定事件

  • bind绑定:不会阻止冒泡事件向上冒泡
  • catch绑定:事件绑定可以阻止事件冒泡

向事件对象传参

  • 语法:data-key=value
  • 获取:event.target.dataset.key||event.currentTarget.dataset.key

event.target是触发事件的对象,不一定是绑定事件的对象,例如事件委托/冒泡

currentTarget触发事件的对象一定是绑定事件的对象,没有事件委托

3、列表渲染
  • 语法:wx:for='{{arr}}'
  • wx:key='{{唯一值}}'

默认的个体:item,默认的下标:index,自定义个体名称:wx:for-item='myItem',自定义下标名称:wx:for-index='myIndex'

4、条件渲染
  • wx:if='条件'
  • wx:elif='条件'
  • wx:else

可以用于判断是否需要渲染某个代码块

wx:if和hidden:

hidden的用法:<view hidden='{{true}}'></view>

hidden是切换元素的显示与隐藏,但是始终加载了元素,wx:if则是判断元素是否进行了加载

5、模板的使用

定义模板

<template name="myTemplate">
  <view>
    <text>{{index}}:{{msg}}</text>
  </view>
</template>

引入模板

  • <import src='路径'/>来引入模板结构
  • @import '模板样式路径'来引入模板样式

使用模板,并且导入数据

<template is="myTemplate" data="{{...item}}"/>

// 定义模板中的数据
Page({
  data: {
    item: {
      index: 0,
      msg: 'hello'
    }
  }
})
6、生命周期
  • onLoad():页面加载时触发,一个页面调用一次,可获取页面对应路径的参数query
  • onShow():页面显示时触发,会执行多次
  • onReady():页面初次渲染时触发,只会调用一次,表示页面准备完成,可以与视图进行交互
  • onHide():页面隐藏时触发,例如tab栏的切换或者切换到后台
  • onUpload():页面卸载时触发,例如wx.redirectTo或者wx.navigateBack

image-20220818080044111

四、小程序开发API

微信开放文档

标签: 小程序
最后更新:2022-08-18

粥呀Bo

所谓惊喜,就是苦苦等候的兔子来了,后面却跟着狼

点赞
< 上一篇
下一篇 >

文章评论

取消回复
目录
  • 一、小程序开发
        • 1、小程序开发的不同点
        • 2、适配方案
  • 二、项目的基本结构
        • 1、整体结构
        • 2、小程序页面的组成部分
        • 3、json配置文件
  • 三、wxml语法
        • 1、数据绑定
        • 2、事件绑定
        • 3、列表渲染
        • 4、条件渲染
        • 5、模板的使用
        • 6、生命周期
  • 四、小程序开发API

COPYRIGHT © 2022 zhouyaker.cn. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

陕ICP备2022009272号