微信小程序开发零基础入门

Posted 生命是有光的

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序开发零基础入门相关的知识，希望对你有一定的参考价值。

✍、目录

微信小程序


配套视频教程： B站直达

1、微信小程序

1.1、官方开发者工具

  1. 百度微信开放社区，选择文档 -> 工具 -> 下载

  1. 下载完成安装即可
  2. 打开微信开发者工具，使用微信扫码登录

  • 这里我们可以选择测试号，也可以选择自己的小程序appID
    • 百度微信公众平台，注册并登录小程序号
    • 在主界面-> 开发 -> 开发管理 -> 开发设置 -> AppID(小程序ID)

  • 设置里面可以设置主题、编辑器字号、模拟器位置等等

1.2、小程序结构目录

小程序文件和传统web对比：

结构小程序传统web
结构布局Wxmlhtml
样式WxssCss
逻辑javascriptJavaScript
配置Json无

通过以上对⽐得出，传统web 是三层结构。⽽微信⼩程序 是四层结构，多了⼀层 配置.json

1.3、小程序配置

一个小程序应用程序会包括两种最基本的两种配置文件，一种是全局的app.json 和页面自己的 page.json

注意：配置文件中不能出现注释

1.3.1、全局配置 app.json

  • 作用：小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
  • 官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
  • app.json 用来进行全局配置，文件内容为一个 JSON 对象，有以下常用属性：
    • 在官方文档中 框架 -> 小程序配置 -> 全局配置 中就可以看到

我这里只记录一些常用的：

属性类型必填描述
entryPagePathstring否小程序默认启动首页
pagesstring[]是页面路径列表(需要注意的页面路径开头不用加斜杠)
windowObject否全局的默认窗口表现
tabBarObject否底部 tab 栏的表现
networkTimeoutObject否网络超时时间
debugbpplean否是否开启 debug 模式，默认关闭
  • 以下是一个包含了部分常用配置选项的 app.json ：

  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": 
    "navigationBarTitleText": "Demo"
  ,
  "tabBar": 
    "list": [
      "pagePath": "pages/index/index",
      "text": "首页"
    , 
      "pagePath": "pages/logs/index",
      "text": "日志"
    ]
  ,
  "networkTimeout": 
    "request": 10000,
    "downloadFile": 10000
  ,
  "debug": true

1.3.1.1、entryPagePath

  • 指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。
  • 如果不填，将默认为 pages 列表的第一项。

    "entryPagePath": "pages/index/index"

1.3.1.2、pages

  • 用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息
  • 文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
  • 未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）
  • 小程序中新增/减少页面，都需要对 pages 数组进行修改。

1.3.1.3、window

  • window 用于设置小程序的状态栏、导航条、标题、窗口背景色。它有如下属性
  • 这里只记录常用的，全部可以在官网文档查看。
属性类型默认值描述
navigationBarBackgroundColorHexColor#000000导航栏(Bar)背景颜色，如 #000000
navigationBarTextStylestringwhite导航栏标题颜色，仅支持black/white
navigationBarTitleTextstring导航栏标题文字内容
navigationStylestringdefault导航栏样式，仅支持以下值：
default 默认样式
custom 自定义导航栏
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStylestringdark下拉 loading 的样式，仅支持 dark/light
enablePullDownRefreshbooleanfalse是否开启全局的下拉刷新

    "window":
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "大林的MINI-Program",
    "navigationBarTextStyle":"black"

1.3.1.4、tabBar

  • 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
  • tabBar有如下属性，我们这里只记录常用的
属性类型必填默认值描述
colorHexColor是tab 上的文字默认颜色，仅支持十六进制颜色
selectedColorHexColor是tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColorHexColor是tab 的背景色，仅支持十六进制颜色
borderStylestyle否blacktabbar 上边框的颜色，仅支持 black/white
positionstring否bottomtabBar 的位置，仅支持 bottom/top
listArray是tab 的列表，最少 2 个、最多 5 个 tab

这里着重介绍以下 list，list 接收一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

属性类型必填说明
pagePathstring是页面路径，必须在 pages 中先定义
textstring是tab 上按钮文字
iconPathstring否图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。
当 position 为 top 时，不显示 icon。
selectedIconPathstring否选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。
当 position 为 top 时，不显示 icon。

  "tabBar": 
    "color": "#c30",
    "selectedColor": "#0ff",
    "backgroundColor": "#ccc",
    "borderStyle": "white",
    "list": [
      
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/images/home.png",
        "selectedIconPath": "/images/home (1).png"
      ,
        "pagePath": "pages/logs/logs",
        "text": "日志"
      ,
        "pagePath": "pages/test/test",
        "text": "案例"
      
    ]
  ,

1.3.1.5、debug

  • 可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 形式给出
  • 其信息有 Page 的注册，页面路由，数据更新，事件触发等。可以帮助开发者快速定位一些常见的问题。

    "debug": true

1.3.2、页面配置：页面名称.json

属性类型默认值描述
navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如 #000000
navigationBarTextStylestringwhite导航栏标题颜色，仅支持 black / white
navigationBarTitleTextstring导航栏标题文字内容
navigationStylestringdefault导航栏样式，仅支持以下值：
default 默认样式
custom 自定义导航栏，只保留右上角胶囊按钮。
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStylestringdark下拉 loading 的样式，仅支持 dark / light
backgroundColorTopstring#ffffff顶部窗口的背景色，仅 ios 支持
backgroundColorBottomstring#ffffff底部窗口的背景色，仅 iOS 支持
enablePullDownRefreshbooleanfalse是否开启当前页面下拉刷新。
disableScrollbooleanfalse设置为 true 则页面整体不能上下滚动。 只在页面配置中有效，无法在 app.json 中设置

1.3.3、sitemap配置：sitemap.json

  • sitemap配置：用于被微信搜索爬取页面(其实就是提高小程序的曝光量)

  • 小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象

  • 如果没有 sitemap.json ，则默认为所有页面都允许被索引；了解即可

1.4、新建页面的快捷方式

我们知道，在 index 目录下存在 index.js、index.json、index.wxml、index.wxss 四个文件，这其实就是我们的 index 页面所需要的。那么如果我们想新建页面，难道还需要新建四次上述文件吗？其实是不需要的，我们只需要在 app.json 中的 pages 数组中添加我们的页面即可自动生成上述四种文件。

1.5、小程序常见组件的学习

1.5.1、view组件

属性如下：

属性类型默认值说明
hoer-classstringnone指定按下去的样式类。
当hover-class="none"时,没有点击态效果
hover-stop-propagationbooleanfalse指定是否阻止本节点的祖先节点出现点击态
hover-start-timenumber50按住后多久出现点击态，单位毫秒
hover-stay-timenumber400手指松开后点击态保留时间，单位毫秒
<!-- wxml -->
<view hover-class="click" hover-start-time="500">点击</view>

<!-- wxss -->
.click 
  background-color: green;

1.5.2、text组件

属性如下：

属性类型默认值说明
user-selectbooleanfalse文本是否可选，该属性会使文本节点显示为 inline-block
spacestring否显示连续空格
decodebooleanfalse是否解码

其中 space 的合法值如下：

值说明
ensp中文字符空格一半大小
emsp中文字符空格大小
nbsp根据字体设置的空格大小
<view>

    <text>文本\\n</text>
    <text user-select="true">可以选择的文本</text>

    <text decode="true">\\n 可以解码的文本 &lt; 解码小于号\\n</text>

    <text space="emsp">中文字符空格大小的文本</text>
</view>

1.5.3、input组件

属性类型默认值说明
valuestring输入框的初始内容
typestringtextinput 的类型
passwordbooleanfalse是否是密码类型
placeholderstring输入框为空时占位符
(value和placeholder同时使用时,value的优先级更高)
disabledbooleanfalse是否禁用 input 输入框
maxlengthnumber140最大输入长度，设置为 -1 时不限制最大长度
confirm-typestringdone设置键盘右下角按钮的文字，仅在 type=“text” 时生效
bindinputeventhadnle是键盘输入时触发。
event.detail = value,cursor,KeyCode
KeyCode 为键值，处理函数可以直接return一个字符串，将替换输入框的内容
bindfocuseventhandle是输入框聚焦时触发
event.detail = value,height
height 为键盘高度
bindblureventhandle是输入框失去焦点时触发
event.detail = value,encryptedValue,encryptError
bindconfirmeventhandle是点击完成按钮时触发
event.detail = value

其中 type 的合法值如下：

值说明
text文本输入键盘
number数字输入键盘
idcard身份证输入键盘
digit带小数点的数字键盘
safe-password密码安全输入键盘

其中 confirm-type 的合法值如下：

值说明
send右下角按钮为"发送"
search右下角按钮为"搜索"
next右下角按钮为"下一个"
go右下角按钮为"前往"
done右下角按钮为"完成"
<!-- input 组件 -->
<input value="value"></input>
<input placeholder="placeholder"></input>
<!-- value和placeholder同时使用时,value的优先级更高 -->
<input value="value" placeholder="placeholder"></input>

<!-- 文本输入键盘 -->
<input type="text" placeholder="文本输入键盘"> </input>

1.5.4、button组件

属性类型默认值说明
sizestringdefault按钮的大小
typestringdefault按钮的样式类型
plainbooleanfalse按钮是否镂空(背景透明色)
disabledbooleanfalse是否禁用
loadingbooleanfalse名称前是否带 loading 图标
form-typestring用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件
open-typestring微信开放能力

其中 size 的合法值为：

值说明
default默认大小
mini小尺寸

其中 type 的合法值：

值说明
primary绿色
default白色
warn红色

其中 open-type 的合法值如下：

值说明
contact打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息
share触发用户转发
getPhoneNumber获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息
getUserInfo获取用户信息，可以从bindgetuserinfo回调中获取到用户信息
launchApp打开APP，可以通过app-parameter属性设定向APP传的参数
openSetting打开授权设置页
feedback打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容

1.5.5、image组件

属性类型默认值说明
srcstring图片资源地址(由于小程序最大只有2MB，所以我们的图片肯定都是远程)
modestringsacleToFill图片裁剪、缩放的模式
webpbooleanfalse默认不解析 webP 格式，只支持网络资源
lazy-loadbooleanfalse图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
show-menu-by-longpressbooleanfalse长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单
binderroreventhandle当错误发生时触发
bindloadeventhandle当图片载入完毕时触发

其中 mode 的常用合法值如下：

值说明
scaleToFill缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
<image src="xxx" mode="aspectFill"></image>

1.5.6、navigator组件

1.5.7、scroll-view组件

<!-- wxml -->
<!-- scroll-x 允许横向滚动, scroll-left 设置横向滚动条位置 -->
<scroll-view scroll-x="true" scroll-left="150">
    <view class="srcOut">
        <view class="srcBox">111</view>
        <view class="srcBox">222</view>
        <view class="srcBox">333</view>
        <view class="srcBox">444</view>
        <view class="srcBox">555</view>
        <view class="srcBox">666</view>
    </view>
</scroll-view>

<!-- wxss -->
.srcOut
  display: flex;
  width: 600px;


.srcBox
  width: 100px;
  height: 100px;
  background-color: red;
  margin-right: 2px;



<!-- wxml -->
<!-- scroll-y 允许纵向滚动, scroll-top 设置竖向滚动条位置 -->
<scroll-view scroll-y="true" scroll-top="150">
    <view class="srcOut">
        <view class="srcBox">111</view>
        <view class="srcBox">222</view>
        <view class="srcBox">333</view>
        <view class="srcBox">444</view>
        <view class="srcBox">555</view>
        <view class="srcBox">666</view>
    </view>
</scroll-view>

<!-- wxss -->
.srcOut
  
  height: 600px;


.srcBox
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 2px;

1.5.8、swiper组件

属性类型默认值说明
indicator-dotsbooleanfalse是否显示面板指示点(也就是轮播图下面的小点)
indicator-colorcolorrgba(0,0,0,.3)指示点颜色
indicator-active-colorcolor#000000当前选中的指示点颜色
autoplaybooleanfalse是否自动切换
currentnumber0当前所在滑块的 index
intervalnumber5000自动切换时间间隔
durationnumber5000滑块动画时长
circularbooleanfalse是否采用衔接滑动
verticalbooleanfalse滑动方向是否为纵向
easing-functionstring“default”指定 swiper 切换缓动动画类型
bindchangeeventhandlecurrent 改变时会触发 change 事件
bindtransitioneventhandleswiper-item 的位置发生改变时会触发 transition 事件
bindanimationfinisheventhandle动画结束时会触发 animationfinish 事件

其中 easing-function 的合法值如下：

值说明
default默认缓动函数
linear线性动画
easeInCubic缓动动画
easeOutCubic缓动动画
easeInOutCubic缓入缓出动画
  • ./ 代表目前所在的目录
  • ../ 代表上一层目录
  • / 代表根目录
<!-- wxml -->
<swiper indicator-dots="true" indicator-color="rgba(255,255,255,.3)" indicator-active-color="#fff" autoplay="true" circular="true">
  <swiper-item>
    <image src="/images/2019_ps.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/2019_ps_ai.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/2019_ps_guanggaogouqi.jpg"></image>
  </swiper-item>
</swiper>

1.5.9、checkbox组件

<!-- wxml -->
<checkbox>未选中多选框</checkbox>
<checkbox checked="true">选中多选框</checkbox>
<checkbox color="red">选中多选框的颜色</checkbox>


<checkbox-group>
  <checkbox>中国</checkbox>
  <checkbox>美国</checkbox>
  <checkbox>韩国</checkbox>
  微信小程序开发零基础入门


 零基础入门，花生壳骨灰级微信小程序开发教程


 开源即时通讯IM框架MobileIMSDK的微信小程序端开发快速入门


 2018年最新微信小程序开发 零基础


 分享《微信小程序开发图解案例教程》PDF及代码+《微信小程序开发入门及案例详解》PDF及代码


 最全教程：微信小程序开发入门详解