最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

微信小程序学习笔记 播报

来源:博客园
目录
  • 注册及开发配置
  • 新建第一个项目
      • 在微信开发者工具中新建项目
      • 目录结构
      • 新建一个页面
  • 基本组件
      • 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属性:

效果:

未完待续...

关键词: