微信小程序学习笔记

主页 > 综合 > 详情

微信小程序学习笔记

博客园 2023-04-21 00:58:04

注册及开发配置
新建第一个项目
- - 在微信开发者工具中新建项目
  - 目录结构
  - 新建一个页面
基本组件
- - view 组件
  - scroll-view 组件
  - swiper 和 wiper-item组件
  - text和rich-text 组件
  - button 组件
  - image组件

注册及开发配置

注册：微信公众平台
注册后在开发管理-开发设置中复制AppID(小程序ID)；
开发工具：推荐官方微信开发者工具

(资料图片仅供参考)
微信官方文档：微信开放文档

新建第一个项目

在微信开发者工具中新建项目

打开并登录微信开发者工具，新建一个小程序项目。appID填入你刚刚复制的id，后端服务可选中不使用云服务，模板可选择js基础模板。

目录结构

主要包括pages目录、utils目录及一些全局文件。其中pages目录存放每一个页面，一个页面放在一个文件夹中，比如index就是一个页面；utils存放一些工具方法；一个页面主要由.js .json .wxml .wxss 文件组成，.js为JavaScript，.json为配置文件， .wxml为页面结构，相当于html， .wxss为页面样式，相当于css。除此之外在项目目录中还有一些全局样式和全局配置文件，如app.wxss app.json等，app.js为整个小程序的入口。

新建一个页面

在全局配置文件app.json中的"pages"存放了所有的页面路径，手动在pages下添加一个页面list，并将其移到第一位。

ctrl+s 保存后可以在左边目录看到已经多了一个list页面。

基本组件

view 组件

相当于html中的div组件，一个容器，可以存放内容，也可以存放其他组件。

在list页面中的wxml文件中输入如：view组件展示

可以在左边的模拟器中看到效果。

scroll-view 组件

scroll-view组件可以实现滑动效果。如外卖小程序点餐时左侧的滑动菜单。

使用：设置为上下滑动时，必须给定一个高度，设置为左右滑动时，必须给定一个宽带。
wxml：

  A  B  C

wxss:

/* 滑动效果 */.container1 view {  width: 100px;  height: 100px;  text-align: center;  line-height: 100px;}.container1 view:nth-child(1) {  background-color: lightgreen;}.container1 view:nth-child(2) {  background-color: lightblue;}.container1 view:nth-child(3) {  background-color: lightpink;}.container1 {  border: 1px solid red;  width: 100px;  height: 120px;}

效果：可以拖拽上下滑动

swiper 和 wiper-item组件

swiper 和 wiper-item 组件可以实现轮播图效果。swiper为父容器，wiper-item为轮播的对象。

使用
swiper 组件的常用属性：
wxml:

      A        B        C

wxss:

/* 轮播图 */.swiper-container {  height: 150px;}.item {  height: 100%;  line-height: 150px;  text-align: center;}swiper-item:nth-child(1) .item {  background-color: lightgreen;}swiper-item:nth-child(2) .item {  background-color: lightblue;}swiper-item:nth-child(3) .item {  background-color: lightpink;}