十分钟上手小程序开发，史上最全的《入门级》小程序开发

注册账号

建议使用全新的邮箱，没有注册过其他小程序或者公众号的。访问 注册页面 ，耐心完成注册即可。

获取 APPID

由于后期调用微信小程序的接口等功能，需要索取开发者的小程序中的 APPID ，所以在注册成功后，可登录，然后获取 APPID。

登录 ，成功后可看到如下界面

然后复制你的 APPID,悄悄的保存起来，不要给别人看到 😄。 开发工具

微信小程序自带开发者工具，集 开发 预览 调试 发布 于一身的 完整环境。

但是由于编码的体验不算好，因此 建议使用 vs code + 微信小程序编辑工具 来实现编码

vs code 负责敲代码， 微信编辑工具 负责预览

第一个微信小程序打开微信开发者工具新建小程序项目 填写项目信息

微信开发者工具介绍

详细的使用，可以查看官网 小程序结构目录

小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

小程序框架提供了自己的视图层描述语言 WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

小程序文件结构

结构微信小程序结构WXML样式WXSS逻辑Javascript配置JSON

基本的项目目录 小程序配置文件

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

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

全局配置 app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。 普通快速启动项目 里边的 app.json 配置

{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } }

字段的含义

pages 字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

window 字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

完整的配置信息请参考 app.json 配置 tabbar 页面底部导航

"tabBar": { "list": [ { "pagePath": "pages/index/index", //跳转的路径 "text": "首页", //名称 "iconPath": "./tabs/tab_home_nor@3x.png", // 图标 "selectedIconPath": "./tabs/tab_home_fill@3x.png" //选中的图标 }, { "pagePath": "pages/category/index", "text": "分类", "iconPath": "./tabs/tab_classify_nor.png", "selectedIconPath": "./tabs/tab_classify_fill@3x.png" }, { "pagePath": "pages/cart/index", "text": "购物车", "iconPath": "./tabs/tab_cart_nor@3x.png", "selectedIconPath": "./tabs/tab_cart_fill@3x.png" }, { "pagePath": "pages/user/index", "text": "我的", "iconPath": "./tabs/tab_my_nor@3x.png", "selectedIconPath": "./tabs/tab_my_fill@3x.png" } ] },

页面配置 page.json

这里的 page.json 其实用来表示页面目录下的 page.json 这类和小程序页面相关的配置。

开发者可以独立定义每个页面的一些属性，如顶部颜色、是否允许下拉刷新等等。

页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

属性类型默认值描述navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如 #000000navigationBarTextStyleStringwhite导航栏标题颜色，仅支持 black / whitenavigationBarTitleTextString导航栏标题文字内容backgroundColorHexColor#ffffff窗口的背景色backgroundTextStyleStringdark下拉 loading 的样式，仅支持 dark / lightenablePullDownRefreshBooleanfalse是否全局开启下拉刷新onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位为 px。disableScrollBooleanfalse设置为 true 则页面整体不能上下滚动；只在页面配置中有效，无法在 app.json 中设置该项

模板语法

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合 基础组件 、 事件系统 ，可以构建出页面的结构。

数据绑定

普通写法

<view> {{ message }} </view> 复制代码 Page({ data: { message: 'Hello MINA!' } }) 复制代码

组件属性

<view id="item-{{id}}"> </view> 复制代码 Page({ data: { id: 0 } }) 复制代码

bool 类型

不要直接写 checked=“false”，其计算结果是一个字符串

<checkbox checked="{{false}}"> </checkbox> 复制代码

三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view> 复制代码

算数运算

<view> {{a + b}} + {{c}} + d </view> 复制代码 Page({ data: { a: 1, b: 2, c: 3 } }) 复制代码

逻辑判断

<view wx:if="{{length > 5}}"> </view> 复制代码

字符串运算

<view>{{"hello" + name}}</view> 复制代码 Page({ data:{ name: 'MINA' } }) 复制代码

列表渲染

wx:for

项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名

下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名

wx:key 用来提高数组渲染的性能

<view wx:for="{{array}}" wx:key="{{item}}"> {{index}}: {{item.message}} </view> 复制代码 Page({ data: { array: [{ message: 'foo', }, { message: 'bar' }] } }) 复制代码

block 渲染一个包含多节点的结构块 block 最终不会变成真正的 dom 元素

<block wx:for="{{[1, 2, 3]}}"> <view> {{index}}: </view> <view> {{item}} </view> </block> 复制代码

条件渲染

wx:if

在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：

<view wx:if="{{condition}}"> True </view> 复制代码

hidden

<view hidden="{{condition}}"> True </view> 复制代码

类似 wx:if

频繁切换 用 hidden

不常使用 用 wx:if

小程序事件的绑定

小程序中绑定事件，通过 bind 关键字来实现。如 bindtap bindinput bindchange 等

<input bindinput="handleInput" /> 复制代码 Page({ // 绑定的事件 handleInput: function(e) { console.log(e); console.log("值被改变了"); } }) 复制代码

特别注意

绑定事件时不能带参数 不能带括号 以下为错误写法 <input bindinput="handleInput(100)" /> 复制代码 事件传值 通过标签自定义属性的方式 和 value <input bindinput="handleInput" data-item="100" /> 复制代码 事件触发时获取数据 handleInput: function(e) { // {item:100} console.log(e.currentTarget.dataset) // 输入框的值 console.log(e.detail.value); } 复制代码

样式 WXSS

与 CSS 相比， WXSS 扩展的特性有：

响应式长度单位rpx 样式导入

尺寸单位

rpx （responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx 。如在 iPhone6 上，屏幕宽度为 375px ，共有 750 个物理像素，则 750rpx = 375px = 750物理像素 ， 1rpx = 0.5px = 1物理像素 。

设备rpx 换算 px (屏幕宽度/750)px 换算 rpx (750/屏幕宽度)iPhone51rpx = 0.42px1px = 2.34rpxiPhone61rpx = 0.5px1px = 2rpxiPhone6 Plus1rpx = 0.552px1px = 1.81rpx

建议：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

使用步骤：

确定设计稿宽度 pageWidth计算比例 750rpx = pageWidth px ,因此1px=750rpx/pageWidth 。在 less 文件中，只要把设计稿中的 px => 750/pageWidth rpx即可。

样式导入

wxss 中直接就支持，样式导入功能。

也可以和 less 中的导入混用。

使用 @import 语句可以导入外联样式表，只支持 相对路径 。

示例代码：

/** common.wxss **/.small-p { padding:5px; } 复制代码 /** app.wxss **/ @import"common.wxss"; .middle-p { padding:15px; } 复制代码

特别需要注意的是 小程序 不支持通配符 * 因此以下代码无效！

*{ margin:0; padding:0; box-sizing:border-box; } 复制代码

目前支持的选择器有：

选择器样例样例描述.class.intro选择所有拥有 class=“intro” 的组件#id#firstname选择拥有 id=“firstname” 的组件elementview选择所有 view 组件elementelement view, checkbox选择所有文档的 view 组件和所有的 checkbox 组件nth-child(n)view:nth-child(n)选择某个索引的标签::afterview::after在 view 组件后边插入内容::beforeview::before在 view 组件前边插入内容

小程序中使用 less

原生小程序不支持 less ，其他基于小程序的框架大体都支持，如 wepy ， mpvue ， taro 等。但是仅仅因为一个 less 功能，而去引入一个框架，肯定是不可取的。因此可以用以下方式来实现

编辑器是 vscode安装插件 easy less 在 vs code 的设置中加入如下，配置 "less.compile": { "outExt": ".wxss" } 复制代码 在要编写样式的地方，新建 less 文件，如 index.less ,然后正常编辑即可。

常见组件

代替 原来的 div 标签

<view hover-class="h-class"> 点击我试试 </view> 复制代码

文本标签

只能嵌套 text

长按文字可以复制（只有该标签有这个功能）

可以对空格 回车 进行编码

属性名类型默认值说明selectableBooleanfalse文本是否可选decodeBooleanfalse是否解码

代码

<text selectable="{{false}}" decode="{{false}}"> 普 通 </text> 复制代码

图片标签，image 组件默认宽度 320px、高度 240px

支持懒加载

属性名类型默认值说明srcString图片资源地址modeString‘scaleToFill’图片裁剪、缩放的模式lazy-loadBooleanfalse图片懒加载

mode 有效值：

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

模式值说明缩放scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素缩放aspectFit保持纵横比缩放图片，使图片的长边能完全显示出来。缩放aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来缩放widthFix宽度不变，高度自动变化，保持原图宽高比不变裁剪top不缩放图片，只显示图片的顶部区域裁剪bottom不缩放图片，只显示图片的底部区域裁剪center不缩放图片，只显示图片的中间区域裁剪left不缩放图片，只显示图片的左边区域裁剪right不缩放图片，只显示图片的右边区域裁剪top left不缩放图片，只显示图片的左上边区域裁剪top right不缩放图片，只显示图片的右上边区域裁剪bottom left不缩放图片，只显示图片的左下边区域裁剪bottom right不缩放图片，只显示图片的右下边区域

微信内置轮播图组件 默认宽度 100% 高度 150px

属性名类型默认值说明indicator-dotsBooleanfalse是否显示面板指示点indicator-colorColorrgba(0, 0, 0, .3)指示点颜色indicator-active-colorColor#000000当前选中的指示点颜色autoplayBooleanfalse是否自动切换intervalNumber5000自动切换时间间隔circularBooleanfalses 是否循环轮播

swiper

滑块视图容器。

swiper-item

滑块

默认宽度和高度都是 100% navigator

导航组件 类似超链接标签

属性名类型默认值说明targetStringself在哪个目标上发生跳转，默认当前小程序，可选值 self/miniProgramurlString当前小程序内的跳转链接open-typeStringnavigate跳转方式

open-type 有效值：

值说明navigate保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面redirect关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面reLaunch关闭所有页面，打开到应用内的某个页面navigateBack关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层exit退出小程序，target="miniProgram"时生效

rich-text

富文本标签

可以将字符串解析成 对应标签，类似 vue 中 v-html 功能 代码

// 1 index.wxml 加载 节点数组 <rich-text nodes="{{nodes}}" bindtap="tap"></rich-text> // 2 加载 字符串 <rich-text nodes='<img src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.png" alt="">'></rich-text> // index.js Page({ data: { nodes: [{ name: 'div', attrs: { class: 'div_class', style: 'line-height: 60px; color: red;' }, children: [{ type: 'text', text: 'Hello World!' }] }] }, tap() { console.log('tap') } }) 复制代码

nodes 属性

nodes 属性支持 字符串 和 标签节点数组

属性说明类型必填备注name标签名string是支持部分受信任的 HTML 节点attrs属性object否支持部分受信任的属性，遵循 Pascal 命名法children子节点列表array否结构和 nodes 一致

文本节点：type = text

属性说明类型必填备注text文本string是支持 entities nodes 不推荐使用 String 类型，性能会有所下降。rich-text 组件内屏蔽所有节点的事件。attrs 属性不支持id ，支持 class 。name 属性大小写不敏感。如果使用了不受信任的 HTML 节点，该节点及其所有子节点将会被移除。img 标签仅支持网络图片。 <button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" > default </button> 复制代码 属性类型默认值必填说明sizestringdefault否按钮的大小typestringdefault否按钮的样式类型plainbooleanfalse否按钮是否镂空，背景色透明disabledbooleanfalse否是否禁用loadingbooleanfalse否名称前是否带 loading 图标form-typestring否用于 ](https://developers.weixin.qq.com/miniprogram/dev/component/form.html) 组件，点击分别会触发 [ 组件的 submit/reset 事件open-typestring否微信开放能力

size 的合法值

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

type的合法值

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

form-type 的合法值

值说明submit提交表单reset重置表单

open-type 的合法值

值说明contact打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息， 具体说明share触发用户转发，使用前建议先阅读 使用指引getPhoneNumber获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息， 具体说明getUserInfo获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息launchApp打开 APP，可以通过 app-parameter 属性设定向 APP 传的参数 具体说明openSetting打开授权设置页feedback打开“意见反馈”页面，用户可提交反馈内容并上传 日志 ，开发者可以登录 小程序管理后台 后进入左侧菜单“客服反馈”页面获取到反馈内容 属性类型默认值必填说明typestring是icon 的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clearsizenumber/string23否icon 的大小colorstring否icon 的颜色，同 css 的 color

需要搭配 radio-group 一起使用

checkbox 需要搭配 checkout-group 一起使用

自定义组件

类似 vue 或者 react 中的自定义组件

小程序允许我们使用自定义组件的方式来构建页面。

创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4 个文件组成

可以在微信开发者工具中快速创建组件的文件结构 在文件夹内 components/myHeader ，创建组件 名为 myHeader

声明组件

首先需要在组件的 json 文件中进行自定义组件声明

myHeader.json { "component": true } 复制代码

编辑组件

同时，还要在组件的 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式

slot 表示插槽，类似 vue 中的 slot

myHeader.wxml

<!-- 这是自定义组件的内部WXML结构 --> <view class="inner"> {{innerText}} <slot></slot> </view> 复制代码

在组件的 wxss 文件中编写样式

注意：在组件 wxss 中不应使用 ID 选择器、属性选择器和标签名选择器。

myHeader.wxss

/* 这里的样式只应用于这个自定义组件 */ .inner { color: red; } 复制代码

注册组件

在组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法

myHeader.js

Component({ properties: { // 这里定义了innerText属性，属性值可以在组件使用时指定 innerText: { // 期望要的数据是 string类型 type: String, value: 'default value', } }, data: { // 这里是一些组件内部数据 someData: {} }, methods: { // 这里是一个自定义方法 customMethod: function(){} } }) 复制代码

声明引入自定义组件

首先要在页面的 json 文件中进行引用声明。还要提供对应的组件名和组件路径

index.wxml

{ // 引用声明 "usingComponents": { // 要使用的组件的名称 // 组件的路径 "my-header":"/components/myHeader/myHeader" } } 复制代码

页面中使用自定义组件

<view> <!-- 以下是对一个自定义组件的引用 --> <my-header inner-text="Some text"> <view>用来替代slot的</view> </my-header> </view> 复制代码

其他属性

定义段与示例方法

Component 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等。

定义段类型是否必填描述propertiesObject Map否组件的对外属性，是属性名到属性设置的映射表，参见下文dataObject否组件的内部数据，和 properties 一同用于组件的模板渲染observersObject否组件数据字段监听器，用于监听 properties 和 data 的变化，参见 数据监听器methodsObject否组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见 组件事件createdFunction否组件生命周期函数，在组件实例刚刚被创建时执行，注意此时不能调用 setData ，参见 组件生命周期attachedFunction否组件生命周期函数，在组件实例进入页面节点树时执行，参见 组件生命周期readyFunction否组件生命周期函数，在组件布局完成后执行，参见 组件生命周期movedFunction否组件生命周期函数，在组件实例被移动到节点树另一个位置时执行，参见 组件生命周期detachedFunction否组件生命周期函数，在组件实例被从页面节点树移除时执行，参见 组件生命周期

组件-自定义组件传参

父组件通过 属性 的方式给子组件传递参数

子组件通过 事件 的方式向父组件传递参数

过程

父组件 把数据 {{tabs}} 传递到 子组件的 tabItems 属性中**父组件 **监听 onMyTab 事件 子组件触发 bindmytap 中的 mytap 事件

triggerEvent 事件名 detail

父 -> 子 动态传值 this.selectComponent("#tabs");

父组件代码

// page.wxml <tabs tabitems="{{tabs}}" bindmytap="onMyTab" > 内容-这里可以放插槽 </tabs> // page.js data: { tabs:[ {name:"体验问题"}, {name:"商品、商家投诉"} ] }, onMyTab(e){ console.log(e.detail); }, 复制代码

子组件代码

// com.wxml <view class="tabs"> <view class="tab_title" > <block wx:for="{{tabItems}}" wx:key="{{item}}"> <view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view> </block> </view> <view class="tab_content"> <slot></slot> </view> </view> // com.js Component({ //接收父组件传递的数据 properties: { tabitems:{ type:Array, value:[] } }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { handleItemActive(e){ this.triggerEvent('mytap','haha'); } } }) 复制代码 标签名 是 中划线的方式属性的方式 也是要中划线的方式其他情况可以使用驼峰命名组件的文件名如 myHeader.js 的等组件内的要接收的属性名 如 innerText更多。。

小程序生命周期

分为 应用生命周期 和 页面生命周期

关于小程序前后台的定义和小程序的运行机制，请参考 运行机制 章节。

属性类型默认值必填说明onLaunchfunction否监听小程序初始化。onShowfunction否监听小程序启动或切前台onHidefunction否监听小程序切后台。onErrorfunction否错误监听函数。onPageNotFoundfunction否页面不存在监听函数。 属性类型说明dataObject页面的初始数据onLoadfunction生命周期回调—监听页面加载onShowfunction生命周期回调—监听页面显示onReadyfunction生命周期回调—监听页面初次渲染完成onHidefunction生命周期回调—监听页面隐藏onUnloadfunction生命周期回调—监听页面卸载onPullDownRefreshfunction监听用户下拉动作onReachBottomfunction页面上拉触底事件的处理函数onShareAppMessagefunction用户点击右上角转发onPageScrollfunction页面滚动触发事件的处理函数onResizefunction页面尺寸改变时触发，详见 响应显示区域变化onTabItemTapfunction当前是 tab 页时，点击 tab 时触发

页面生命周期图解 结尾

希望大家看了本篇文章都有收获 …