专业小程序设计开发——助力新电商新零售

电话+V：159999-78052，欢迎咨询一人只能签一次的微信小程序叫什么形式，[小程序设计与开发]，[小程序投流与推广]，[小程序后台搭建]，[小程序整套源码打包]，[为个体及小微企业助力]，[电商新零售模式]，[小程序运营推广及维护]

一、微信云开发设置每个用户只能填写一次

不能设置。

1、微信云开发设置的时候是不能设置一个人填写一次的，微信云开发就是开发小程序，有开发者，管理员，体验者三个角色，开发者就是小程序的开发人员了。

2、管理者，可以拥有开发者的一切权限。

二、...微信签名小程序市民签有什么用，一个微信只能添加一个证书吗?_百度...

微信签名小程序可以直接在微信上面支付签名等。

在开放微信生态客服消息、服务端能力、开放数据等能力的基础上，“小程序·云开发”新增订阅消息和微信支付能力。过往开发者需要通过复杂的步骤才能实现模板管理、订阅管理以及消息下发，“小程序·云开发”则可以通过简单的几个云函数就可以实现订阅消息功能。

对那些没有开发能力、需要委托第三方服务商进行开发的商家来说，“小程序·云开发”也提供了一种新的合作开发模式。通过“小程序·云开发”，商家可以将云开发能力授权给第三方开发者，让服务商将商家服务部署在云开发上，实现了各商家数据和后台的相对独立，彼此不会干扰，保障数据安全。

腾讯云相关业务负责人向界面新闻表示，“小程序·云开发”下一阶段的目标是帮助企业提升生产力，从提供基础能力到面向企业场景服务，成为更专业的生产工具。

微信小程序学习笔记_02模板与配置

WXML模板

WXML（WeiXinMarkupLanguage）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的HTML。

WXML和HTML的区别:

标签名称不同HTML（div，span，img，a）WXML（view，text，image，navigator）属性节点不同超链接
提供了类似于Vue中的模板语法数据绑定列表渲染条件渲染WXSS样式

WXSS(WeiXinStyleSheets)是一套样式语言，用于描述WXML的组件样式，类似于网页开发中的CSS。

WXSS和CSS的区别:

新增了rpx尺寸单位CSS中需要手动进行像素单位换算，例如remWXSS在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算提供了全局的样式和局部样式项目根目录中的app.wxss会作用于所有小程序页面局部页面的.wxss样式仅对当前页面生效WXSS仅支持部分CSS选择器.class和#idelement并集选择器、后代选择器::after和::before等伪类选择器小程序的宿主环境

什么是宿主环境宿主环境（hostenvironment）指的是程序运行所必须的依赖环境。例如：

Android系统和iOS系统是两个不同的宿主环境。安卓版的微信App是不能在iOS环境下运行的，所以，Android是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的！

小程序的宿主环境手机微信是小程序的宿主环境，如图所示：

小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如：

微信扫码、微信支付、微信登录、地理定位、etc…

组件

小程序中组件的分类小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了9大类，分别是：

视图容器基础内容表单组件导航组件媒体组件map地图组件canvas画布组件开放能力无障碍访问常用的视图容器类组件view普通视图区域类似于HTML中的div，是一个块级元素常用来实现页面的布局效果scroll-view可滚动的视图区域常用来实现滚动列表效果swiper和swiper-item轮播图容器组件和轮播图item组件view组件的基本使用实现如图的flex横向布局效果：

scroll-view组件的基本使用实现如图的纵向滚动效果：

swiper和swiper-item组件的基本使用实现如图的轮播图效果：

swiper组件的常用属性属性

类型

默认值

说明

indicator-dots

boolean

false

是否显示面板指示点

indicator-color

color

rgba(0，0，0，.3)

指示点颜色

indicator-active-color

color

#000000

当前选中的指示点颜色

autoplay

boolean

false

是否自动切换

interval

number

5000

自动切换时间间隔

circular

boolean

false

是否采用衔接滑动

常用的基础内容组件text文本组件类似于HTML中的span标签，是一个行内元素rich-text富文本组件支持把HTML字符串渲染为WXML结构text组件的基本使用通过text组件的selectable属性，实现长按选中文本内容的效果：

rich-text组件的基本使用通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构：

其它常用组件button按钮组件功能比HTML中的button按钮丰富通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）image图片组件image组件默认宽度约300px、高度约240pxnavigator（后面课程会专门讲解）页面导航组件类似于HTML中的a链接button按钮的基本使用

image组件的基本使用

image组件的mode属性image组件的mode属性用来指定图片的裁剪和缩放模式，常用的mode属性值如下：

mode值

说明

scaleToFill

（默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素

aspectFit

缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

aspectFill

缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

widthFix

缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

heightFix

缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

API

小程序API概述

小程序中的API是由宿主环境提供的，通过这些丰富的小程序API，开发者可以方便的调用微信提供的能力，例如：获取用户信息、本地存储、支付功能等。

小程序API的3大分类

小程序官方把API分为了如下3大类：

事件监听API特点：以on开头，用来监听某些事件的触发举例：wx.onWindowResize(functioncallback)监听窗口尺寸变化的事件同步API特点1：以Sync结尾的API都是同步API特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常举例：wx.setStorageSync('key'，'value')向本地存储中写入内容异步API特点：类似于jQuery中的$.ajax(options)函数，需要通过success、fail、complete接收调用的结果举例：wx.request()发起网络数据请求，通过success回调函数接收数据WXML模板语法

数据绑定

数据绑定的基本原则在data中定义数据在WXML中使用数据在data中定义页面的数据在页面对应的.js文件中，把数据定义到data对象中即可：

Mustache语法的格式把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。语法格式为：

Mustache语法的应用场景Mustache语法的主要应用场景如下：

绑定内容绑定属性运算（三元运算、算术运算等）动态绑定内容页面的数据如下：

页面的结构如下：

动态绑定属性页面的数据如下：

页面的结构如下：

三元运算页面的数据如下：

页面的结构如下：

算数运算页面的数据如下：

页面的结构如下：

事件绑定

什么是事件事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

小程序中常用的事件类型

绑定方式

事件描述

tap

bindtap或bind:tap

手指触摸后马上离开，类似于HTML中的click事件

input

bindinput或bind:input

文本框的输入事件

change

bindchange或bind:change

状态改变时触发

事件对象的属性列表当事件回调触发的时候，会收到一个事件对象event，它的详细属性如下表所示：

属性

类型

说明

type

String

事件类型

timeStamp

Integer

页面打开到触发事件所经过的毫秒数

target

Object

触发事件的组件的一些属性值集合

currentTarget

Object

当前组件的一些属性值集合

detail

Object

额外的信息

touches

Array

触摸事件，当前停留在屏幕中的触摸点信息的数组

changedTouches

Array

触摸事件，当前变化的触摸点信息的数组

target和currentTarget的区别target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。举例如下：

点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数。

此时，对于外层的view来说：

e.target指向的是触发事件的源头组件，因此，e.target是内部的按钮组件e.currentTarget指向的是当前正在触发事件的那个组件，因此，e.currentTarget是当前的view组件bindtap的语法格式在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。

通过bindtap，可以为组件绑定tap触摸事件，语法如下：

在页面的.js文件中定义对应的事件处理函数，事件参数通过形参event（一般简写成e）来接收：

在事件处理函数中为data中的数据赋值通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值，示例如下：

事件传参小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。例如，下面的代码将不能正常工作：

因为小程序会把bindtap的属性值，统一当作事件名称来处理，相当于要调用一个名称为btnHandler(123)的事件处理函数。

可以为组件提供data-*自定义属性传参，其中*代表的是参数的名字，示例代码如下：

最终：

info会被解析为参数的名字数值2会被解析为参数的值在事件处理函数中，通过event.target.dataset.参数名即可获取到具体参数的值，示例代码如下：

bindinput的语法格式在小程序中，通过input事件来响应文本框的输入事件，语法格式如下：

通过bindinput，可以为文本框绑定输入事件：

在页面的.js文件中定义事件处理函数：

实现文本框和data之间的数据同步实现步骤：

定义数据渲染结构美化样式绑定input事件处理函数定义数据：

渲染结构：

美化样式：

绑定input事件处理函数：

条件渲染

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

也可以用wx:elif和wx:else来添加else判断：

结合使用wx:if如果要一次性控制多个组件的展示与隐藏，可以使用一个标签将多个组件包装起来，并在标签上使用wx:if控制属性，示例如下：

注意：并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。

hidden在小程序中，直接使用hidden="{{condition}}"也能控制元素的显示与隐藏：

wx:if与hidden的对比运行方式不同wx:if以动态创建和移除元素的方式，控制元素的展示与隐藏hidden以切换样式的方式（display:none/block;），控制元素的显示与隐藏使用建议频繁切换时，建议使用hidden控制条件复杂时，建议使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换列表渲染

wx:for通过wx:for可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：

默认情况下，当前循环项的索引用index表示；当前循环项用item表示。

手动指定索引和当前项的变量名*使用wx:for-index可以指定当前循环项的索引的变量名使用wx:for-item可以指定当前项的变量名示例代码如下：

wx:key的使用类似于Vue列表渲染中的:key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率，示例代码如下：

WXSS模板样式

介绍

什么是WXSSWXSS(WeiXinStyleSheets)是一套样式语言，用于美化WXML的组件样式，类似于网页开发中的CSS。

WXSS和CSS的关系WXSS具有CSS大部分特性，同时，WXSS还对CSS进行了扩充以及修改，以适应微信小程序的开发。

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

rpx尺寸单位@import样式导入

rpx

什么是rpx尺寸单位rpx（responsivepixel）是微信小程序独有的，用来解决屏适配的尺寸单位。

rpx的实现原理rpx的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即：当前屏幕的总宽度为750rpx）。

在较小的设备上，1rpx所代表的宽度较小在较大的设备上，1rpx所代表的宽度较大小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。

rpx与px之间的单位换算*在iPhone6上，屏幕宽度为375px，共有750个物理像素，等分为750rpx。则：

750rpx=375px=750物理像素

1rpx=0.5px=1物理像素

设备

rpx换算px(屏幕宽度/750)

px换算rpx(750/屏幕宽度)

iPhone5

1rpx=0.42px

1px=2.34rpx

iPhone6

1rpx=0.5px

1px=2rpx

iPhone6Plus

1rpx=0.552px

1px=1.81rpx

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

开发举例：在iPhone6上如果要绘制宽100px，高20px的盒子，换算成rpx单位，宽高分别为200rpx和40rpx。

样式导入

什么是样式导入使用WXSS提供的@import语法，可以导入外联的样式表。

@import的语法格式@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。示例如下：

全局样式和局部样式

全局样式定义在app.wxss中的样式为全局样式，作用于每一个页面。

局部样式在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面。

注意：

当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式

当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

全局配置

全局配置文件及常用的配置项

小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下：

pages记录当前小程序所有页面的存放路径

window全局设置小程序窗口的外观

tabBar设置小程序底部的tabBar效果

style是否启用新版的组件样式

window

小程序窗口的组成部分

了解window节点常用的配置项属性名

类型

默认值

说明

navigationBarTitleText

String

字符串

导航栏标题文字内容

navigationBarBackgroundColor

HexColor

#000000

导航栏背景颜色，如#000000

navigationBarTextStyle

String

white

导航栏标题颜色，仅支持black/white

backgroundColor

HexColor

#ffffff

窗口的背景色

backgroundTextStyle

String

dark

下拉loading的样式，仅支持dark/light

enablePullDownRefresh

Boolean

false

是否全局开启下拉刷新

onReachBottomDistance

Number

50

页面上拉触底事件触发时距页面底部距离，单位为px

设置导航栏的标题设置步骤：app.json->window->navigationBarTitleText

需求：把导航栏上的标题，从默认的“WeChat”修改为“黑马程序员”，效果如图所示：

设置导航栏的背景色设置步骤：app.json->window->
navigationBarBackgroundColor

需求：把导航栏标题的背景色，从默认的#fff修改为#2b4b6b，效果如图所示：

设置导航栏的标题颜色设置步骤：app.json->window->navigationBarTextStyle

需求：把导航栏上的标题颜色，从默认的black修改为white，效果如图所示：

注意：navigationBarTextStyle的可选值只有black和white

全局开启下拉刷新功能概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。

设置步骤：app.json->window->把enablePullDownRefresh的值设置为true

注意：在app.json中启用下拉刷新功能，会作用于每个小程序页面！

设置下拉刷新时窗口的背景色当全局开启下拉刷新功能之后，默认的窗口背景为白色。如果自定义下拉刷新窗口背景色，设置步骤为:app.json->window->为backgroundColor指定16进制的颜色值#efefef。效果如下：

设置下拉刷新时loading的样式当全局开启下拉刷新功能之后，默认窗口的loading样式为白色，如果要更改loading样式的效果，设置步骤为app.json->window->为backgroundTextStyle指定dark值。效果如下：

注意：backgroundTextStyle的可选值只有light和dark

设置上拉触底的距离概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

设置步骤：app.json->window->为onReachBottomDistance设置新的数值

注意：默认距离为50px，如果没有特殊需求，建议使用默认值即可。

tabBar

什么是tabBartabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：

底部tabBar顶部tabBar

注意：

tabBar中只能配置最少2个、最多5个tab页签

当渲染顶部tabBar时，不显示icon，只显示文本

tabBar的6个组成部分

tabBar节点的配置项属性

类型

必填

默认值

描述

position

String

否

bottom

tabBar的位置，仅支持bottom/top

borderStyle

String

否

black

tabBar上边框的颜色，仅支持black/white

color

HexColor

否

tab上文字的默认（未选中）颜色

selectedColor

HexColor

否

tab上的文字选中时的颜色

backgroundColor

HexColor

否

tabBar的背景色

list

Array

是

tab页签的列表，

最少2个、最多5个tab

每个tab项的配置选项属性

类型

必填

描述

pagePath

String

是

页面路径，页面必须在pages中预先定义

text

String

是

tab上显示的文字

iconPath

String

否

未选中时的图标路径；当postion为top时，不显示icon

selectedIconPath

String

否

选中时的图标路径；当postion为top时，不显示icon

页面配置

页面配置文件的作用小程序中，每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

页面配置和全局配置的关系小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。

如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的.json配置文件”就可以实现这种需求。

注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

页面配置中常用的配置项属性

类型

默认值

描述

navigationBarBackgroundColor

HexColor

#000000

当前页面导航栏背景颜色，如#000000

navigationBarTextStyle

String

white

当前页面导航栏标题颜色，仅支持black/white

navigationBarTitleText

String

当前页面导航栏标题文字内容

backgroundColor

HexColor

#ffffff

当前页面窗口的背景色

backgroundTextStyle

String

dark

当前页面下拉loading的样式，仅支持dark/light

enablePullDownRefresh

Boolean

false

是否为当前页面开启下拉刷新的效果

onReachBottomDistance

Number

50

页面上拉触底事件触发时距页面底部距离，单位为px

网络数据请求

小程序中网络数据请求的限制出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：

只能请求HTTPS类型的接口必须将接口的域名添加到信任列表中

配置request合法域名需求描述：假设在自己的微信小程序中，希望请求https://www.escook.cn/域名下的接口

配置步骤：登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名

注意事项：

域名只支持https协议域名不能使用IP地址或localhost域名必须经过ICP备案服务器域名一个月内最多可申请5次修改发起GET请求调用微信小程序提供的wx.request()方法，可以发起GET数据请求，示例代码如下

发起POST请求调用微信小程序提供的wx.request()方法，可以发起POST数据请求，示例代码如下：

在页面刚加载时请求数据在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的onLoad事件中调用获取数据的函数，示例代码如下：

跳过request合法域名校验如果后端程序员仅仅提供了http协议的接口、暂时没有提供https协议的接口。

此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS版本及HTTPS证书」选项，跳过request合法域名的校验。

注意：

跳过request合法域名校验的选项，仅限在开发与调试阶段使用！

关于跨域和Ajax的说明跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。

Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起Ajax请求”，而是叫做“发起网络数据请求”。

视频讲解到黑马程序员哦~

【WINDRISES MINIPROGRAM PROMOTION】尊享直接对接老板

电话+V： 159999-78052

专注于小程序推广配套流程服务方案。为企业及个人客户提供了高性价比的运营方案，解决小微企业和个体拓展客户的问题