【微信小程序】小程序使用详细教程（建议收藏）_微信小程序教程

1- 微信小程序简介

---

1.1 微信小程序的相关介绍

• 介绍

微信小程序，简称小程序。英文名mini program，是一种不需要下载安装就可以直接使用的应用。他实现了触手可及的梦想。用户扫一扫或搜一下就可以直接打开应用。

• 为什么叫微信小程序

微信里的app，2016年1月11日，张小龙，微信内部研究新的形态，应用号，后改名小程序。

• 竞争平台

支付宝小程序，钉钉，美团，头条，抖音，qq小程序…

• 优点

1. 在微信里面自由分享
2. 不用下载app
3. 能快速地开发，使用微信的api接口

• 开发者

内存，源码，图片，存储，接口与数据都有限制

1.2 如何使用

1. 注册一个微信小程序 mp.weixin.qq.com/ (帐号信息 — 邮箱激活 — 信息登记)
2. 获取id
3. 开发者工具
   微信开发者工具下载

1.3 微信开发者工具

• 进入微信开发者工具，新建项目，可参考以下图，进行创建；

• 界面介绍

• 小程序配置文件app.json

代码部分

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#f90",
    "navigationBarTitleText": "小课堂",
    "navigationBarTextStyle": "white"
  },
1
2
3
4
5
6

• 特别注意：

在小程序 详情 界面 勾选上 不校验合法域名,web-view(业务域名),TLS版本以及HTTPS证书

1.4 页面组件

• 界面组成介绍

• pages/home

home.wxml 模板文件
home.js 业务逻辑
home.wxss 样式
home.json 页面配置

• .wxss

1. 默认单位是 rpx
2. 750rpx 等于 一个屏幕的宽(当屏幕宽度等于 750px 时，1px = 1rpx)
3. 375 就是 50% 的 宽(当屏幕宽度等于375px时， 1px =0.5rpx)

1.5 内置组件

此处列举一些常用的组件…

1. view组件（块组件）

相当于 div标签

2. text 组件 （行内组件）

1. 只能嵌套text标签
2. 长按文字可以复制【selectable】
3. （只有这个标签有这个功能）
4. 可以对回车,空格进行编码 (decode)

3. button 组件 （按钮）

1. 大小（size:mini/default），
2. 颜色(type:default/primary/warn)，
3. 是否镂空（plain），
4. 是否在文字前有加载loading（loading），
5. 开发能力（opentype）

4. input 组件（表单）

1. radio 单选框
2. checkbox 多选框

5. image标签 （打包上线的大小不能超过2M，使用图片的时候统一使用外网图片）

1. 图片存在默认的宽高（320px * 240px）
2. mode 决定 图片内容 和 图片标签 做适配
   scaleToFill 默认值 不保持纵横比，拉伸至标签定义的宽高
   aspectFit 保持宽高比，保证图片的长边完全显示（常用 轮播图）
   aspectFill 短边完全显示
   widthFix 宽度不变，高度自动变化，保持原宽高比不变
   top，left，bottom，right 背景图定位
3. 小程序中的图片 直接支持 懒加载
   lazy-load 会自己判断 当图片出现在视口的上下三屏之内的时候，自己开始加载图片

6. navigator 导航组件 (块级元素，默认换行)
7. rich-text(富文本标签，将字符串解析成对应标签，相当于v-html)

• 注意

9. 在pages 文件夹 右键建立新的文件夹
10. 在文件夹右键，新建页面
11. 哪个page在最上面，默认显示哪页(对 app.json 来说)
12. .json 要求严格语法，不能有多余的注释和逗号

2- 小程序的模板语法

---

2.1 文本渲染

• {{ msg }}

1. 可以进行简单的js 表示 如：{{2 + 3 }}，{{msg.length}}
2. 运算 --> 表达式（ 数值计算，字符串拼接，三元表达式）

• 代码部分

<view class="view">文本渲染，
  <text>可以执行简单JavaScript表达式</text>
</view>
<view>{{msg}}</view>
<view>{{5+9}}</view>
<view>{{msg.length}}</view>
<view>{{msg.length>8?"大于呀":"不大于"}}</view>
1
2
3
4
5
6
7

• js

  /**
   * 页面的初始数据
   */
  data: {
         "msg":"你好腾讯，我又学习微信小程序了",
  },
1
2
3
4
5
6

• 代码截图
  

2.2 条件渲染

条件渲染（wx:if）（wx:if, wx:elif, wx:else） (hidden 属性是通过添加样式的方式来呈现的)

当标签不是频繁的切换使用if，频繁切换使用hidden

• 组件
  wx:if=" "
  wx:elif=" "
  wx:else

• .wxml

<view class="view">条件渲染</view>
<view>嗨,需要登录</view>
<view wx:if="{{isLog}}">你好         本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】