微信小程序学习笔记

  • 微信小程序学习笔记已关闭评论
  • 93 次浏览
  • A+
所属分类:Web前端
摘要

持续更新中,GitHub:https://github.com/TuuliC/applet-of-WeChat-note.git注册:微信公众平台

持续更新中,GitHub:https://github.com/TuuliC/applet-of-WeChat-note.git

一.注册及开发配置

  1. 注册:微信公众平台

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

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

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

二.新建第一个项目

2.1新建项目

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

微信小程序学习笔记

2.2目录结构

微信小程序学习笔记

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

2.3新建页面

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

微信小程序学习笔记

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

三.基本组件

3.1 view 组件

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

在list页面中的wxml文件中输入 如:<view>view组件展示</view>

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

微信小程序学习笔记

3.2 scroll-view 组件

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

微信小程序学习笔记

  • 使用:设置为上下滑动时,必须给定一个高度,设置为左右滑动时,必须给定一个宽带。

    wxml:

<!-- 滑动效果,scroll-y 表示上下滑动 --> <scroll-view class="container1" scroll-y="true">   <view>A</view>   <view>B</view>   <view>C</view> </scroll-view> 

​ 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; } 
  • 效果:可以拖拽上下滑动

    微信小程序学习笔记

3.3 swiper 组件和 wiper-item 组件

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

  • 使用

    swiper 组件的常用属性:

    微信小程序学习笔记

    wxml:

<!-- 轮播图效果 --> <swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="gray" autoplay="true" interval="3000" circular="true">   <swiper-item>     <view class="item">A</view>   </swiper-item>   <swiper-item>     <view class="item">B</view>   </swiper-item>   <swiper-item>     <view class="item">C</view>   </swiper-item> </swiper> 

​ 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; } 
  • 效果:

    微信小程序学习笔记

3.4 text 和 rich-text 组件

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

wxml:

<!-- 文本组件 text和rich-text --> <view>   <!-- user-select="true" 设置为长按选中 -->   <text user-select="true">text文本展示</text> </view>  <!-- 富文本 --> <rich-text nodes="<h1 style='color: red;'>标题</h1>"></rich-text> 

效果:

微信小程序学习笔记

3.5 button 组件

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

type属性可以指定类型。

wxml:

<!-- type属性指定类型 --> <button>普通按钮</button> <button type="primary" >主色调按钮</button> <button type="warn">警告按钮</button>  <!-- size="mini" 小尺寸按钮 --> <button size="mini">普通按钮</button> <button type="primary" size="mini">主色调按钮</button> <button type="warn" size="mini">警告按钮</button>  <!-- plain 镂空按钮 --> <button size="mini" plain="true">普通按钮</button> <button type="primary" size="mini" plain="true">主色调按钮</button> <button type="warn" size="mini" plain="true">警告按钮</button> 

效果:

微信小程序学习笔记

3.6 image 组件

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

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

微信小程序学习笔记

<!--image 图片组件 --> <image src="/images/1.png" alt="微信小程序学习笔记" mode="heightFix"></image> 

效果:

微信小程序学习笔记

3.7 input 组件

wxml:

<input value="这是输入框"/> 

输入框默认样式为空白,可在wxss中修改样式

wxss:

input{   border: 2px solid #eee;   margin: 5px;   padding: 5px;   border-radius: 3px; } 

效果:

微信小程序学习笔记

3.8 block 组件

block组件是一个无实际意义的包裹性容器,不会输出自身,只会输出block组件中的子组件。通常搭配wx:if、wx:for使用。

四.基础语法

4.1 数值绑定

使用{{xxx}}进行数值绑定,xxx可以是data中的值,也可以是一个表达式。

使用:

wxml:

<!-- 数值绑定 --> <view>{{info}}</view> <image src="{{imgSrc}}" mode="widthFix"></image> <view>随机数{{randomNum>=5 ? '大于等于5' : '小于5'}}</view> 

js:

data: {    info: 'hello world',    imgSrc: 'https://tuuli-note-image.oss-cn-guangzhou.aliyuncs.com/img/202302222310438.jpg',    randomNum: Math.random() * 10 //生成10以内的随机数   }, 

效果:

微信小程序学习笔记

4.2 事件绑定

  1. 常用事件:

微信小程序学习笔记

  1. 事件参数对象的属性包括:

微信小程序学习笔记

  1. 在事件传参时,不能使用 bindtap="btnTap(par)" 的方式传参,应使用 bindtap="btnTap" data-info="{{par}}" 的方式传参。

  2. 在js中,修改某个值不能用 this.value=xxx ,要使用 this.setData({value: xxx}) ,修改时调用原值可以使用this.data.value,如this.setData({count: this.data.count + 1})

  3. 按钮事件:

    wxml:

    <!-- 事件绑定 --> <button type="primary" bindtap="btnTagHandler">按钮</button> <button type="primary" bindtap="countChange">{{count}} 点我+1</button> <button type="primary" bindtap="btnTap2" data-info="{{2}}">{{count}} 点我+2</button> 

    js:

    data: {    count: 0   },  //按钮事件绑定 btnTagHandler(e){     console.log(e); //在控制台打印参数e,查看对象e的属性   },   countChange(){     this.setData({       count: this.data.count + 1 //修改值     })   },   btnTap2(e){     this.setData({       count: this.data.count + e.target.dataset.info //接受参数,参数的值保存在e.target.dataset中     })   }, 

    效果:

    微信小程序学习笔记

  4. input输入框事件:

    wxml:

    <!-- input输入框 --> <view>这是你输入的文字:{{msg}}</view> <input value="{{msg}}" bindinput="inputHandler" /> 

    wxss:

    input{   border: 2px solid #eee;   margin: 5px;   padding: 5px;   border-radius: 3px; } 

    js:

    data: {    msg: '在此输入文字',   },        // 输入事件绑定 inputHandler(e){    this.setData({      msg: e.detail.value //输入的值保存在e.detail.value中    }) }    

    效果:

    微信小程序学习笔记

4.3 条件渲染

可以使用wx:if=“{{flag}}” wx:elif=“{{flag}}” wx:else=“{{flag}}” 进行条件渲染,亦可使用wx:hidden=“{{flag}}” 进行条件渲染。

使用:

wxml:

<!-- 条件渲染,写在{{}}里面,也可使用hidden="{{flag}}" --> <view wx:if="{{type===1}}">type=1</view> <view wx:elif="{{type===2}}">type=2</view> <view wx:else="">type!=1 && type!=2</view> <block wx:if="{{true}}">   <view>使用block组件包裹</view> </block> 

js:

data: {    type: 1, }, 

效果:

微信小程序学习笔记

4.4 列表渲染

  1. 使用wx:for="{{arr}}"渲染一个数组;

  2. wx:for-index="index" 指定索引名,默认为index, wx:for-item="item" 指定项名,默认为item, wx:key="index" 指定key值

使用:

wxml:

<view wx:for="{{arr1}}" wx:key="index">   索引是:{{index}},item项是:{{item}} </view> 

js:

data: {    arr1: ['arr1','arr2','arr3'] }, 

效果:

微信小程序学习笔记

未完待续...