微信小程序学习笔记

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

注册及开发配置

1. 注册：微信公众平台

   
   【资料图】

   注册后在开发管理-开发设置中复制AppID(小程序ID)；

2. 开发工具：推荐官方 微信开发者工具

3. 微信官方文档： 微信开放文档

新建第一个项目

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

打开并登录微信开发者工具，新建一个小程序项目。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;}

• 效果：

text和rich-text 组件

text为普通文本，rich-text为富文本格式，可以解释html语言。可添加属性 user-select="true" 设置文本为可长按选中，默认为false；富文本内容写在nodes属性中。

wxml：

    text文本展示标题">

效果：

button 组件

button为按钮组件，微信官方提供多种类型的按钮，点击可以调用多种微信请求。

type属性可以指定类型。

wxml：

普通按钮主色调按钮警告按钮普通按钮主色调按钮警告按钮普通按钮主色调按钮警告按钮

效果：

image组件

image为图片组件，可以展示图片。

src填入图片的url链接，可以在.wxss中设置宽高等属性，mode属性设置图片的展示方式，常用的mode属性：

效果：

未完待续...

关键词：