小程序介绍，注册，安装，初体验

微信小程序介绍

  • 特点：
    • 体积小、轻便，使用方便。它依赖于微信平台。
  • 目前常见的小程序有？
    • 粤康码
    • 核酸码
    • 羊了羊
    • .........
  • 能提供媲美原生app的效果
  • 只适用于轻便的app、太过臃肿不适合放到微信小程序里的
  • 学微信小程序好处：
    • 工作需要
    • 可以外接一些项目来做
    • 自己独立创业、有些小程序可能要依赖服务器（部署、开发接口）
    • 可以装B

运行环境不同

  • 以前开发的项目，用浏览器运行
  • 微信小程序，用微信运行（开发者工具提供模拟器预览）

api不同

  • 本质上是在操作dom，可以用 window.open window.close history、document这些东西，这些东西都是浏览器提供的api
  • 微信小程序开发不能用上面这种东西，但是可以用微信提供的一些api

开发环境不同

  • 以前用编辑器（vsocde） + 浏览器来开发
  • 微信小程序统一只用微信开发者工具、HBuilder

小程序开发者账号注册

官网-注册

步骤流程图

  • 点击立即注册

  • 类型选择 小程序

  • 填写账号信息

  • 注册完提示 邮箱激活

  • 去邮箱点击链接激活账号

  • 然后选择账号主体（选个人，其他的需要营业执照等信息）

  • 获取小程序的AppID（重要，开发需要用到，不用记，会找得到即可）

安装微信开发者工具

官网-下载地址

  • 以后小程序官方推荐使用 微信开发者工具 来开发，它内部集成了开发环境、模拟器
  • 下一步即可，没必要改安装位置

使用开发者工具新建第一个小程序项目

查看项目效果的两种方式

  • 模拟器查看（用的比较多）

    • 开发时常用

  • 真机查看（用的少）

    • 一般是一段功能写完了，再用真机看看是否正常

项目基本结构说明

  • pages：（主要写代码的地方）
    • 类似于之前的views
    • 放页面的地方，一个页面一个文件夹
  • utils：
    • 放工具的地方
  • .eslintrc.js：eslint的配置文件
  • app.js： 入口文件，类似于之前的main.js
  • app.json：配置整个项目运行效果的配置文件，例如导航条的颜色
  • app.wxss：全局样式文件
  • project.config.json：项目编写环境的配置文件
  • project.private.config.js：项目编写环境的配置文件（私有的，优先级比上面的要高）
  • sitemap.json：设置小程序的说明的文件

小程序页面组成各文件说明

  • wxml：
    • wx： 微信的缩写
    • ml： mark language
    • 就是跟html一样的作用，写结构的地方，但是小程序里面不是写html标签，它是微信提供的标签
    • 微信提供的标签，也不叫标签，统一称之为组件
  • wxss：
    • 样式文件，它只是页面样式，只影响当前页面
  • js：写逻辑代码的地方
  • json：当前页面的配置文件

如何新建页面？

  • 方法一（不推荐）：
    • 需要来到pages右键新建文件夹，然后对着这个文件夹右键新建page，最后来到 app.json，把这个页面放到最上面才能看到它
  • 方法二（推荐）
    • 直接来到 app.json，找到pages，在它最上面写路径

image-20221121112355443

容器组件 - view的使用

官方文档

  • view类似于html中的div，专门用来做布局，包裹别的内容
<view>
  内容
</view>
  • 在小程序里写html的标签可以写，但是没任何效果，写了跟没写一样
  • 在app.json里pages最上面的那个，就是我们打开小程序所看到的第一个页面

表单组件 - button体验

官方文档

  • 用法
<button>
    文字
</button>
  • 属性
    • type：指定样式
      • primary： 绿色
      • default: 灰色，默认
      • warn： 红色
    • size: 尺寸大小
      • default: 默认
      • mini: 小
    • plain：是否镂空，加上就代表镂空，不加就不镂了

媒体组件 - image体验

官方文档

  • 用法
<image src="路径" mode="模式"></image>

- mode有很多种，建议看官网文档学习
    - 常见的：
        - 默认值：  scaleToFill， 图片会拉伸铺满整个image，可能会变形
        - aspectFit： 类似于以前的contain，它能保证整张图片能完整显示，不会变形
        - aspectFill： 类似于以前的cover，它不会变形，但是有可能会显示不全
        - widthFix： 宽度用盒子的宽度，高度自适应，也不会变形
        - heightFix：高度用盒子的高度，宽度自适应，也不会变形
        - ............

内容组件 - text与richText体验

官方文档

  • text组件：
    • 类似于以前的span
    • 不能渲染出标签，如果里面写标签，什么都不显示
  • richText组件：
    • 既能显示文字，也能渲染出标签
    • 所谓的渲染出标签，是渲染出小程序自己的标签（组件）
    • 如果直接写html标签，不会解析
    • 要想解析html标签，该使用 nodes属性，用了nodes属性会覆盖原本的内容
    • 例
<rich-text nodes="<h1>我是h1</h1>"></rich-text>

容器组件 - scroll-view体验

官方文档

  • 用法
<scroll-view>
 要滚动的内容
</scroll-view>
  • 要想垂直滚动，那么必须要给scroll-view给一个小于内容总高度的高度，再加一个属性叫 scroll-y
  • 要想水平滚动，那么必须要给scroll-view给一个小于内容宽度的宽度，再加一个属性叫 scroll-x

容器组件 - swiper体验

官方文档

  • 实现轮播图效果的组件
  • swiper组件内部只能放 swiper-item，有几个 swiper-item就代表有几个轮播图
  • 例：
<!--pages/studySwiper/index.wxml-->
<swiper class="my-swiper" autoplay interval="1000" circular indicator-dots>
  <swiper-item>
    <image src="https://img0.baidu.com/it/u=1777844187,3975591106&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"></image>
  </swiper-item>
  <swiper-item>
    <image src="https://img2.baidu.com/it/u=1669612383,1027114075&fm=253&fmt=auto&app=138&f=JPEG?w=436&h=596"></image>
  </swiper-item>
  <swiper-item>
  <image src="https://img0.baidu.com/it/u=2811925555,2399677850&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"></image>
  </swiper-item>
  <swiper-item>
  <image src="https://www.itcast.cn/images/teacher/2019572614571000.jpg"></image>
  </swiper-item>
</swiper>
  • 常用属性有
    • indicator-dots
      • 产生指示器
    • indicator-color
      • 指数器颜色
    • indicator-active-color
      • 当前选中的指示器颜色
    • autoplay
      • 自动轮播，默认是5秒
    • interval
      • 自动轮播的间隔时间，单位是毫秒
    • circular
      • 是否循环轮播，最后一张能到第一张，第一张后退能到最后一张
    • 其他属性可以查阅文档

小程序里的事件绑定

官方文档

  • 语法:
    • 前面加bind，后面跟事件名
      • bind事件名
      • 例：
        • bindtap
  • 例
<button size="mini" type="primary" bindtap="fn1">摸我啊</button>
  • 在小程序中，方法声明在js文件的跟 data平级的位置，不用包 methods，直接写函数名
data: {
    
},
    
fn1 () {
    console.log('fn1被调用')
}
  • 小程序里，即使触发事件只有1句话，也不能写在行内，行内必须是调用一个函数

小程序里访问data中的数据

  • 通过 this.data.数据名 来访问
  • 跟vue的区别在于，vue里面不加data，但是小程序里必须加data

小程序里设置data中的数据

  • 语法
this.setData({
    数据名: 要修改的数据
})
  • 例：
this.setData({
    msg: '你好',
    age: 15
})
  • 小程序里要修改data中的数据，必须用 this.setData，如果不是用setData而是直接修改，触发不了界面更新。

动态绑定行内属性

  • vue里以前绑定动态行内属性，用v-bind:src简写为:src
  • 小程序里呢？
<组件 src="{{ pic }}"></组件>
  • src没有写死，而是根据pic这个变量得到

案例：切换图片

screenshots

  • 完成两个按钮版
    • 把界面铺设完毕：
      • 大盒子里放两个按钮外加一个image
    • 需要声明一个变量叫 url，默认值为吴彦祖图片
    • 给每个按钮加点击事件，点击事件里改掉url的值即可
  • 一个按钮版作为作业

小程序里的事件对象

  • 如何拿到小程序里的事件对象？
    • 跟webAPI一样，就是在事件绑定的函数里写一个形参e，这个e就是事件对象
    • 事件对象里有什么东西？
      • e.target：获取真正触发事件的元素（目标元素）

小程序事件传参

  • 小程序里，不允许事件加()来传参，不然都会报错
<view bindtap="fn1(10)"></view>
<view bindtap="fn1()"></view>

- 这样都会报错，提示找不到
  • 在原生小程序中，绑定事件函数名都不能加小括号
  • 那如何传递参数？
    • 先把参数写到行内
<view data-数据名="数据"></view>

- 然后事件里通过 `e.target.dataset.数据名` 可以获取
- 例

<view data-id={{age}} data-name="张三丰" bindtap="fn1"></view>

fn1 (e) {
    console.log(e.target.dataset.age)
    console.log(e.target.dataset.name)
}
  • 小程序新版里有更简化的用法，用mark
<view mark:数据名="数据"></view>
  • 然后事件里通过 e.mark.数据名 即可获取
  • 例
<view mark:id={{age}} mark:name="张三丰" bindtap="fn1"></view>

fn1 (e) {
    console.log(e.mark.age)
    console.log(e.mark.name)
}

小程序里也有事件冒泡

  • 事件冒泡：
    • 当一个元素的事件触发时，会依次往上调用它所有父级的同名事件
  • 再次验证了
    • e.target 是事件源（真正触发事件的元素）
    • e.currentTarget 是当前处理事件的元素
  • 如何阻止事件冒泡？
    • 以前是： e.stopPropgation()
    • 原生小程序里不能这么阻止
    • 原生小程序里要想没有冒泡，必须绑定一个没有冒泡的事件，用catch事件名
    • 例
<!-- 此时点击按钮不会冒泡 -->
<button catchtap="fn2">
    
</button>

案例： 上一页与下一页的图片切换案例

  • 注意修改data中的数据要用 setData，不能直接++或--
posted @ 2023-01-31 10:49  Cherishe  阅读(274)  评论(0)    收藏  举报