wechat mini program wiki
1.0.0
中国顶级通讯应用微信推出了一些相当激进的东西：小程序。嵌入式应用程序无需下载、无需安装。打开、使用、分享，完成！
关于这些应用程序的实用性，存在着广泛的争论和许多点击诱饵……事实上，向开发人员提供的框架仅处于起步阶段，仍然有限，而且老实说有点令人沮丧。尽管如此，腾讯正在投入前所未有的资源来采用这一渠道，积聚动力，并为先行者提供机会。我们相信，如果这些黑客敢于尝试，他们可能会找到快速获胜的方法。
您有想要尽快在微信中部署服务的想法吗？具备 Javascript 基础知识并想尝试这个框架吗？迷失在文档的谷歌翻译中？需要一点小小的提升来解密什么是可能的或不可能的吗？您好，欢迎光临。
通过官方文档找到方法并不容易。事实上，它需要大量的试验/错误、对开源代码的一些研究以及许多假设才能完成某件事。你一直在用头撞墙。我们明白了。
我们的使命是帮助创意企业家打造出色的科技产品。我们将帮助您采取小步骤。
下面的内容不是文档的翻译，肯定会很快过时。我们的贡献就是帮助任何人快速入门并构建一个很酷的微信小程序。现在就做吧。
您正在开发小程序吗？如果您想分享您的工作、与我们的工作人员见面、寻求帮助，请联系我们！
如果您想做出贡献，您可以在此处发送 Pull Request 或在 shanghai(at)lewagon.com 上向我们留言寻求建议！
这篇原创文章是由 Le Wagon 校友 Adrien Pelegri（第 30 批）在 Thibault Genaitay（中国车手）和 Stephane Delgado（第 61 批）的支持下撰写的。
注册过程确实很困难，尤其是如果您对中国的行政世界没有任何经验的话。微信验证过程会比较长。保持冷静。
从微信小程序注册，直到开发发布，基本上需要经历以下步骤：
以下是注册小程序公司所需的材料清单：
我们建议您按照这篇关于如何注册和创建小程序项目的完整英文手册：Medium 文章或查看此微信官方文档（最后更新：08/02/2017）。
IDE（集成开发环境）是一组用于编写应用程序的编程工具。它由代码编辑器、编译器和调试器组成，可通过单个图形用户界面进行访问。
在这里下载微信IDE：Mac、Windows 64、Windows 32
这是一个快速教程，帮助您掌握微信 IDE 并充分利用它。
代码编辑器，侧面有文件树，左侧有模拟器，显示应用程序的预览。
以下是在开发过程中执行任务的按钮的完整列表：
1. Profile：点击它可以从IDE中注销。 2. 代码编辑3. 调试/检查：见下文。 4、项目信息：见下文。 5. 编译器：当视图的自动刷新不起作用时，可用于编译应用程序。
6. 场景值7. 缓存8. 关闭：退出当前项目并转到另一个项目。 9. 隐藏模拟器10. 设备：提供测试小程序响应能力的设备列表。 11.您可以使用： wifi、4G、3G、2G。 12. 隐藏树状结构13. 管理文件：搜索、添加和删除文件夹或文件。
调试器/检查器：这个工具是IDE的重要组成部分，它看起来像旧的Chrome DevTools 。 
1. 顶栏网络：此面板用于调试请求和套接字问题或页面加载性能。存储：允许访问缓存中的所有数据。 AppData：用于显示当前项目数据。您可以直接在面板中编辑数据并预览。 Wxml：让您可以动态检查和编辑页面的每个元素。传感器：您可以模拟移动设备的位置和性能来调试重力感应。
2. Sources 面板Sources 面板显示当前项目脚本文件。
3. 控制台控制台将通过记录诊断信息并与页面中的 javascript 进行交互（如您放置的console.log() 等）来让您了解代码中存在哪些错误。
项目信息：在此页面中，您可以找到当前项目的详细信息，如您的 AppID、目录信息等。通过点击预览选项，您可以在扫描二维码后直接在手机上测试小程序。
注意：当您在手机上测试小程序时，您可以直接在设备上启用调试器工具。
本节将介绍微信提供的“快速入门”的结构（样板）以及遵守该框架所需的基础知识。
下载微信快速入门.zip。
快速入门树状结构：
。
├──应用程序.js
├──应用程序.json
├──应用程序.wxss
├──页数
│ ├──索引
│ │ ├──index.js
│ │ ├──index.json
│ │ ├──index.wxml
│ │ └── 索引.wxss
│ └──日志
│ ├── 日志.js
│ ├── 日志.json
│ ├── 日志.wxml
│ └── 日志.wxss
└──实用程序
└── util.js
该样板的索引页面显示一个欢迎页面，其中包含当前用户配置文件的信息。单击您的头像将重定向到显示您当前小程序日志的新页面。
微信小程序以“app”文件开头（见下图）。这些文件就是小程序的根目录，也就是你的小程序的入口。 （这里是微信官方文档）。
app.js是脚本代码，是小程序的全局逻辑。您可以设置和操作 MP 的生命周期函数、声明全局变量或调用 API。
Code snippet of the "app.js" file.
// app.js
App ( {
onLaunch : function ( ) {
// API call to get data from the local cache
var logs = wx . getStorageSync ( 'logs' ) || [ ]
logs . unshift ( Date . now ( ) )
wx . setStorageSync ( 'logs' , logs )
} ,
// Get user information
getUserInfo : function ( cb ) {
var that = this
if ( this . globalData . userInfo ) {
typeof cb == "function" && cb ( this . globalData . userInfo )
} else {
// Call login interface
wx . login ( {
success : function ( ) {
wx . getUserInfo ( {
success : function ( res ) {
that . globalData . userInfo = res . userInfo
typeof cb == "function" && cb ( that . globalData . userInfo )
}
} )
}
} )
}
} ,
// Global variable
globalData : {
userInfo : null
}
} )app.json是整个小程序的全局配置。您可以配置MP（小程序）页面的路径、MP窗口样式、设置网络超时和调试配置。
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/logs/logs"
] ,
"window" : {
"backgroundTextStyle" : "gray" ,
"navigationBarBackgroundColor" : "#fff" ,
"navigationBarTitleText" : "Hello World" ,
"navigationBarTextStyle" : "black"
}
}注意： app.json文件中不允许添加注释。
app.wxss是小程序的全局样式表。您应该在此处声明通用样式规则。
微信快速入门的两个页面分别是：
Pages文件夹是您拥有或创建小程序页面的位置。您创建的每个页面都需要包含两个文件：
您可以在创建的每个页面中再添加两个文件：
用于页面配置的.json文件。
界面样式表的.wxss文件。
规则：小程序的每个页面可以由四种不同的文件扩展名（js ; json ; wxml ; wxss）组成，但名称必须相同。
更多详细信息：新页面将始终至少包含.js文件和.wxml文件。 .json文件扩展名仅用于您想要覆盖此特定页面中的窗口配置的情况。如果您想向页面添加样式表，请添加.wxss 。
让我们看看快速入门项目的每个页面中发生了什么。
Code snippet of the "index.js" file.
// index.js
// Get application instance
var app = getApp ( )
Page ( {
data : {
motto : 'Hello World' ,
userInfo : { }
} ,
// Event that redirect user to logs page
Tapped : function ( ) {
console . log ( "tapped" ) ;
wx . navigateTo ( {
url : '../logs/logs'
} )
} ,
onLoad : function ( ) {
console . log ( 'onLoad' )
var that = this
// Call the application instance to get data
app . getUserInfo ( function ( userInfo ) {
// Updates userInfo data
that . setData ( {
userInfo : userInfo
} )
} )
}
} )片段评论：
Page()函数中调用此应用程序实例来收集用户信息。Page()函数并设置data:将数据动态绑定到视图中。Tapped功能将当前用户重定向到他的日志页面。onLoad函数获取用户信息并更新userinfo数据。 Code snippet of the "logs.js" file.
// logs.js
var util = require ( '../../utils/util.js' )
Page ( {
data : {
logs : [ ]
} ,
onLoad : function ( ) {
console . log ( wx . getStorageSync ( 'logs' ) )
this . setData ( {
logs : ( wx . getStorageSync ( 'logs' ) || [ ] ) . map ( function ( log ) {
return util . formatTime ( new Date ( log ) )
} )
} )
}
} )片段评论：
formatTime 。Page()函数并设置data: 。onLoad函数从缓存中检索当前用户日志wx.getStorageSync('logs') 。然后以util.js的 require 提供的formatTime呈现日志。 Code snippet of the "utils.js" file.
function formatTime ( date ) {
var year = date . getFullYear ( )
var month = date . getMonth ( ) + 1
var day = date . getDate ( )
var hour = date . getHours ( )
var minute = date . getMinutes ( )
var second = date . getSeconds ( )
return [ year , month , day ] . map ( formatNumber ) . join ( '/' ) + ' ' + [ hour , minute , second ] . map ( formatNumber ) . join ( ':' )
}
function formatNumber ( n ) {
n = n . toString ( )
return n [ 1 ] ? n : '0' + n
}
module . exports = {
formatTime : formatTime
}笔记：
Utils 中存储了您在其他地方可能需要的导入库（在我们的示例中，log.js 中需要 util.js）。在上面的代码片段中， formatTime函数在util.js中定义，以正确显示日志的日期。
到目前为止，您已经发现每个页面中有两层：
逻辑层（.js）：处理数据并发送给视图层，同时接收视图层触发的事件。
视图层（.wxml/.wxss）：将逻辑层处理后的数据显示到视图中，同时将视图层的事件发送给逻辑层。
我们可以把一个小程序的生命周期分解为两个周期，应用周期和页面周期。 App()生命周期是小程序的起点和终点，而Page()生命周期在用户浏览小程序时激活。
App()函数用于注册小程序。它以一个对象作为参数，指定 MP 的生命周期函数。
评论：
onLaunch函数并初始化MP。onShow函数。onHide函数在当前用户退出小程序时触发。 Code snippet of the "App()" life cycle functions.
App ( {
onLaunch : function ( ) {
// Do something when launch.
} ,
onShow : function ( ) {
// Do something when show.
} ,
onHide : function ( ) {
// Do something when hide.
} ,
onError : function ( msg ) {
console . log ( msg )
} ,
globalData : 'I am global data'
} )微信框架提供了一个名为getApp()全局函数，它是App()的一个实例。
Code snippet "getApp()" function.
// .js
var appInstance = getApp ( )
console . log ( appInstance . globalData ) // I am global data getApp()函数很有用，原因很简单，您无法在Page()函数内部定义App()函数。为了访问应用程序实例，您必须调用getApp()函数。
Page()函数用于注册一个页面。它接受一个对象作为参数，该参数指定页面的初始数据、生命周期函数、事件处理程序等。
评论：
onLoad函数。onShow函数。onShow函数调用onReady来渲染视图。onShow函数直接渲染视图。onHide当小程序跳转到另一个页面时触发。wx.redirectTo()和wx.navigateBack()退出页面时，将调用onUnload函数。或者当当前页面重新启动时， wx.reLaunch 。 Code snippet of "Page()" life cycle functions.
Page ( {
data : {
text : "This is page data."
} ,
onLoad : function ( options ) {
// Do some initializations when page load.
} ,
onReady : function ( ) {
// Do something when page ready.
} ,
onShow : function ( ) {
// Do something when page show.
} ,
onHide : function ( ) {
// Do something when page hide.
} ,
onUnload : function ( ) {
// Do something when page close.
} ,
// Event handler
viewTap : function ( ) {
this . setData ( {
text : 'Set some data.'
} )
}
} )
当App()生命周期完成后，页面第一次通过调用onLoad加载，并且只会调用一次。
小程序从后台（app生命周期）运行到前台（页面生命周期）时，首先调用App() onShow函数，切换到前台时再调用Page() onShow函数。
微信推荐：
App()函数不能重复使用，应在app.js中注册一次。getCurrentPages()页面尚未生成时，请勿调用onLaunch 。getApp()您可以获得App() 的实例，但生命周期函数不会尝试调用App()函数。 小程序的设置非常简单，旨在为您节省时间并在有定制需求时减少挫败感。
微信将app.json配置分为五个部分：
在这一部分中，我们将分解这个完整的app.json 设置示例。
Code snippet "app.json complete setup" example
{
"pages" : [
"pages/index/index" ,
"pages/form/form" ,
"pages/wagon/wagon" ,
] ,
"window" : {
"navigationBarBackgroundColor" : "#D03232" ,
"navigationBarTextStyle" : "white" ,
"navigationBarTitleText" : "Le Wagon" ,
"backgroundColor" : "#eeeeee" ,
"backgroundTextStyle" : "light" ,
"enablePullDownRefresh" : true
} ,
"tabBar" : {
"backgroundColor" : "#FFFFFE" ,
"borderStyle" : "#D3D3D3" ,
"selectedColor" : "#D03232" ,
"color" : "#131313" ,
"list" : [ {
"pagePath" : "pages/index/index" ,
"iconPath" : "image/form.png" ,
"selectedIconPath" : "image/form-hover.png" ,
"text" : "Form"
} , {
"pagePath" : "pages/wagon/wagon" ,
"iconPath" : "image/about.png" ,
"selectedIconPath" : "image/about-hover.png" ,
"text" : "About"
} ]
}
}app.json中pages作用是定义你的小程序的所有路由。该项目的配置是强制性的，它需要一个字符串数组。父页面文件夹中的每个子文件夹和文件都对应一个路由路径。
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/form/form" ,
"pages/wagon/wagon"
]
}提示：每次向"pages"添加路由路径时，IDE 都会自动创建与您刚刚创建的路径对应的文件夹和文件。
微信框架带来了几个路由逻辑：
路由模式说明：
初始化：小程序启动后，通过onLoad和onShow函数加载第一页。
打开新页面：打开新页面会隐藏当前页面并使用wx.navigateTo跳转到另一个页面。在幕后，第一个页面将通过调用onHide函数隐藏，并通过调用onLoad和onShow跳过另一个页面。 
页面重定向：通过调用onUnload关闭当前页面，并使用wx.redirectTo跳转到应用内的页面，调用onLoad和onShow函数。
页面返回： onUnload当前页面，调用onLoad函数，然后调用onShow显示目标页面。
重新加载， wx.reLaunch ：关闭所有页面并重新加载当前页面。 *不适用于某些 andriod 设备。
切换选项卡， wx.switchTab ：从一个 tabBar 页面跳转到另一页面，并通过onUnload、onHide 和 onShow关闭或隐藏所有其他非 tabBar 页面。发现选项卡切换的所有可能场景。
切换标签、导航限制：
微信推荐：
navigateTo 、 redirectTo只能打开非 tabBar 页面。 - switchTab只能打开并显示tabBar页面。 - reLaunch可用于每个页面。 getCurrentPages() ：该函数用于获取当前页面堆栈的实例。它以页面堆栈顺序的数组形式给出。数组的第一项是第一页，最后一项是当前页。
tabBar顾名思义，是配置顶部或底部标签栏的项目。 tabBar是一个数组，可容纳最少 2 个、最多 5 个选项卡。
Code snippet of the "app.json" file.
{
"tabBar" : {
"backgroundColor" : "#FFFFFE" ,
"borderStyle" : "#D3D3D3" ,
"selectedColor" : "#D03232" ,
"color" : "#131313" ,
"list" : [ {
"pagePath" : "pages/index/index" ,
"iconPath" : "image/form.png" ,
"selectedIconPath" : "image/form-hover.png" ,
"text" : "Form"
} , {
"pagePath" : "pages/wagon/wagon" ,
"iconPath" : "image/about.png" ,
"selectedIconPath" : "image/about-hover.png" ,
"text" : "About"
} ]
}
}属性指示：
使用tabBar list键，需要数组的每个元素中有一个对象。
List属性值如下：
TabBar属性说明： 
微信推荐：
tabBar位置设置为顶部无法显示图标。tabBar中的图标大小限制为 40kb、81px*81px。窗口项用于设置小程序标题和常用窗口样式。
Code snippet of the "app.json" file.
"window" : {
"navigationBarBackgroundColor" : "#D03232" ,
"navigationBarTextStyle" : "white" ,
"navigationBarTitleText" : "Le Wagon" ,
"backgroundColor" : "#eeeeee" ,
"backgroundTextStyle" : "light" ,
"enablePullDownRefresh" : true ,
}窗口属性说明：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| 导航栏背景颜色 | 十六进制颜色 | #000000 | 导航栏背景颜色 |
| 导航栏文本样式 | 细绳 | white | 导航栏标题颜色， black或white |
| 导航栏标题文本 | 细绳 | 导航栏标题 | |
| 导航样式 | 细绳 | default | 导航栏样式， default或custom 。使用custom自定义导航栏样式。 |
| 背景颜色 | 十六进制颜色 | #ffffff | 应用程序背景颜色。例如：您在拉动刷新时看到的背景颜色不会影响<page>元素的颜色。 |
| 背景文字样式 | 细绳 | dark | 拉动刷新文本样式， dark或light |
| 背景颜色顶部 | 细绳 | #ffffff | 窗口顶部的背景颜色。仅支持 iOS |
| 背景颜色底部 | 细绳 | #ffffff | 窗口底部的背景颜色。仅支持 iOS |
| 启用下拉刷新 | 布尔值 | false | 启用或禁用拉动以刷新应用程序范围。 |
| 到达底部距离时 | 数字 | 50 | 设置距页面底部的距离，应触发onReachBottom()回调。 |
| 页面方向 | 细绳 | portrait | 设置屏幕旋转支持。支持auto 、 portrait和landscape 。 |
可以使用app.json配置文件中window中的pageOrientation配置应用程序默认方向。该属性支持 3 个值：
auto可让小程序在纵向和横向模式下工作。portrait ，强制小程序仅竖屏显示landscape ，强制小程序仅横向显示需要在全局app.json中配置如上的"enablePullDownRefresh": true ，然后才能在小程序页面调用onPullDownRefresh() 。
Code snippet of the "Enable pull down refresh in a page" file.
// .js
Page ( {
// Pull down the trigger event
onPullDownRefresh ( ) {
// Stop the dropdown refresh
wx . stopPullDownRefresh ( )
}
} ) 微信提供了更改每个页面顶部导航栏标题的可能性。
Code snippet of the "change navbar title" file.
// .js
Page ( {
// Loading spinner when page loads
onload : function ( ) {
wx . showNavigationBarLoading ( )
} ,
// Change navigation bar title
onShow : function ( ) {
wx . setNavigationBarTitle ( {
title : 'My new navabar title' ,
success : function ( res ) {
console . log ( res )
}
} )
}
} )网络超时可以在各种网络请求中提供。如果您想进一步了解，这里是微信文档的链接。
这是微信文档的链接。
WXML是一种类似于HTML的微信标记语言。它结合了基本的组件库和事件系统来构建动态页面。
微信事件系统的行为类似于经典的 Javascript 事件，处理对视图层的逻辑响应。
下表列出了 WXML / HTML 开发中将面临的显着差异：
关于<block>进一步解释：
<block>不是一个组件，它只是一个包装元素，它不会在页面中做任何渲染，只接受控件属性。
注意：所有组件和属性均为小写。
小程序框架不允许开发者使用DOM来控制你的WXML元素。相反，您将通过数据绑定方法更新视图层（.wxml 文件）：
为了符合微信的要求， data属性必须在Page()函数中以 JSON 格式初始化。数据绑定技术允许在视图层内动态更新数据。
一个好的做法是在Page()函数顶部初始化data 。
Code snippet "data binding" example.
<!-- .wxml -->
< view > {{text}} </ view >
< view > {{array[0].msg}} </ view > // .js
Page ( {
data : {
text : 'init data' ,
array : [ { msg : '1' } , { msg : '2' } ]
}
}传递给视图层的动态data:取自相应Page()函数中的数据属性。
数据绑定语法：数据绑定使用 Mustache 语法（双括号）来包装变量。此语法是无逻辑模板引擎分析。总之非常方便好用！
微信提供了很多关于数据绑定使用的可能性。您有机会在组件属性、属性、字符串操作、算术操作、数据路径和数组上使用数据绑定。
wx:for控件属性绑定逻辑层（.js 文件）中的数组，循环遍历它并分配数据。
Code snippet "wx:for" example.
<!-- .wxml -->
< view wx:for =" {{array}} " >
{{index}}: {{item.message}}
</ view > // .js
Page ( {
data : {
array : [ {
message : 'foo'
} , {
message : 'bar'
} ]
}
} )与<view wx:for>类似，您可以使用<block wx:for>来渲染多行块。 （请参阅上面 WXML 表中的块）。
Code snippet "block wx:for" example.
<!-- .wxml -->
< block wx:for =" {{array}} " wx:for-item =" array-item " wx:key =" key " >
< view class =" card " >
< view class =" card-description " >
</ view >
</ view >
</ block >有关上述代码的更多详细信息，请参阅此 Github 存储库。
更多资源：
与wx:for类似， wx:if用于定义条件语句并确定是否应该渲染块。
Code snippet "wx:if" example.
<!-- .wxml -->
<!-- Add additional conditions wx:elif ; wx:else -->
< view wx:if =" {{length > 5}} " > 1 </ view >
< view wx:elif =" {{length > 2}} " > 2 </ view >
< view wx:else > 3 </ view > // .js
Page ( {
data : {
length : 10
}
} )如果您想在条件语句块中显示多个标签，您可以使用<block wx:if> 。
<!-- .wxml -->
< block wx:if =" {{true}} " >
< view > view1 </ view >
< view > view2 </ view >
</ block >进一步挖掘wx:if微信文档。
模板允许定义您想要在小程序的不同文件中多次重复使用的代码片段。
WXML模板项有自己的作用域，只能使用数据传入。
首先，要声明模板，您需要定义其名称。
Code snippet "template" example.
<!-- .wxml -->
< template name =" msgItem " >
< view >
< text > {{index}}: {{msg}} </ text >
< text > Time: {{time}} </ text >
</ view >
</ template >
<!-- Call the template -->
< template is =" msgItem " data =" {{item}} " />稍后，如果您想在同一文件中调用模板，请使用is属性和模板名称作为值来声明所需的模板。并且不要忘记使用data属性将数据传递到模板。
// .js
Page ( {
data : {
item : {
index : 0 ,
msg : 'this is a template' ,
time : '2017-05-18'
}
}
} ) 要声明已在新文件中定义的模板，您首先需要导入它。
Code snippet "define a template in a specific file" exemple
<!-- item.wxml -->
< template name =" item " >
< text > {{text}} </ text >
</ template > Code snippet "import and call the template in index.wxml" exemple
<!-- index.wxml -->
< import src =" item.wxml " />
< template is =" item " data =" {{text: 'forbar'}} " />有关微信文档的更多详细信息，请参见此处。
除了数据初始化和生命周期函数之外，该框架还允许定义事件处理函数。
WXML 元素（事件处理程序）触发事件，逻辑层绑定事件处理程序以接收事件对象作为参数。
Code snippet "event handler" example.
<!-- .wxml -->
< button type =" primary " bindtap =" add " > Incrementation: {{count}} </ button > // .js
Page ( {
data : {
count : 1
} ,
add : function ( e ) {
this . setData ( {
count : this . data . count + 1
} )
}
} ) setData() ：此函数更新逻辑层内的数据，然后将其发送到视图层。 setData()函数接收一个对象作为参数，并使用this.data作为数据路径来更新键值。
绑定事件有很多种，大多数组件都有自己的绑定事件定义。
组件绑定事件：
bindsubmit表单。bindinput用于输入。bindscroll用于滚动视图。 Code snippet "form binding event" example.
<!-- form.wxml -->
< form bindsubmit =" bindFormSubmit " >
<!-- Form inputs -->
< button type =" primary " form-type =" submit " > Submit </ button >
</ form > // form.js
// Form submission function
Page ( {
bindFormSubmit : function ( e ) {
// Treatment
}
} )经典绑定事件：
bind+event_typecatch+event_type Code snippet "data binding illustration" example.
< button bindtap =" ontap " type =" primary " > Tap < button /> Page ( {
ontap : function ( ) {
console . log ( 'tap' ) ;
}
} )使用的两个常见绑定事件是bind+event_type和catch+event_type 。 catch 事件是防止冒泡事件的事件。
冒泡事件概念：对于非 JavaScript 人员，当嵌套在另一个元素中的元素中发生事件时，可以定义冒泡事件。父节点和嵌套元素都注册为该特定事件的事件处理程序。嵌套元素的父节点应该使用catch+event_type ，这将阻止事件冒泡到祖先元素。
Code snippet "counteract bubbling effect with catchtap" example.
<!-- .wxml -->
< view id =" outter " bindtap =" handleTap1 " >
outer view
< view id =" middle " catchtap =" handleTap2 " >
middle view
< view id =" inner " bindtap =" handleTap3 " >
inner view
</ view >
</ view >
</ view > // .js
Page ( {
handleTap1 : function ( e ) {
console . log ( 'outter' )
} ,
handleTap3 : function ( e ) {
console . log ( 'inner' )
} ,
handleTap2 : function ( e ) {
console . log ( 'middle' )
}
} )主要在嵌套元素并且不想显示绑定元素的父节点时使用。
Code snippet "tap and longtap event binding" example.
<!-- index.wxml -->
< button bindtap =" ontap " type =" primary " > Tap < button />
< button bindlongtap =" onlongtap " type =" primary " > Long tap < button /> // index.js
Page ( {
ontap : function ( ) {
console . log ( 'tap' ) ;
} ,
onlongtap : function ( ) {
console . log ( 'longtap' ) ;
}
} )以下是实现小程序分享的实用技巧。微信开放了两种分享小程序的方式：
可以在单击页面右上角...出现的下拉菜单中启用前进按钮。
在小程序页面中创建一个前进按钮。它使共享过程更加用户友好。
在这两种变体中，框架都会自动转发带有 MP 标题屏幕截图的小程序卡。
要启用此按钮，我们需要使用名为onShareAppMessage的Page()函数。
Code snippet "Enable the forward button of the drop-down menu" example.
// index.js
onShareAppMessage : function ( ) {
return {
title : 'Le Wagon coding school' ,
path : 'pages/index/index'
}
} ,在此功能中，您必须定义将显示在转发卡顶部和当前页面路径的标题。如果您忘记添加标题，微信会默认添加一个（您的小程序名称）。
限制：在这种情况下，您唯一可以定义的是onShareAppMessage事件。前进按钮将由框架本身创建。
此功能允许开发人员使用按钮属性open-type及其值'share'在页面内创建特定的前进按钮。
Code snippet "Create a forward button within the page" example.
<!-- about.wxml -->
< view bindtap =" onShareAppMessage " >
< button class =" share-btn " open-type =" share " type =" primary " > Share </ button >
</ view >与第一种情况不同，我们必须创建触发onShareAppMessage函数的事件处理程序。该函数调用wx.showShareMenu并传递withShareTicket作为参数。
// about.js
Page ( {
onShareAppMessage : function ( ) {
console . log ( 'share' )
wx . showShareMenu ( {
withShareTicket : true
} )
}
} )注意：两种变体都使用Page()函数，这意味着您正在共享声明该函数的特定页面。
微信旨在打造友好、高效、一致的用户体验。为了实现这一目标，微信官方设计团队提供了WeUI存储库。这个基础前端库（WeUI）与微信原生视觉体验一致。 WeUI，可以理解为微信前端库，类似于Bootstrap 。它包括大量组件，例如按钮、单元格、对话框、进度、toast、文章、操作表、图标等。
有用的 Github 存储库：
通过npm将 WeUI 存储库下载到本地：
npm install weui-wxss
下载的代码包含WeUI源码和基于WeUI的小程序示例。
我们在微信IDE中打开WeUI小程序示例：
在app.wxss中导入WeUI风格，即可在小程序中使用WeUI风格：
@import "style/weui.wxss" ;
有关微信设计指南的更多详细信息，您可以在此处找到完整文档。
WXSS 几乎具有 CSS 的所有功能。 app.wxss中定义的样式表是每个页面上标识的通用样式规则。特定页面中定义的样式表是本地样式，仅作用于当前页面，因此会覆盖app.wxss中使用的相同选择器。 WXSS与CSS相比有两个主要区别：
WXSS使用rpx （响应像素）作为单位。它允许根据屏幕的宽度调整像素。您可以继续使用经典的px单位（只是不是微信的做事方式）。 (1rpx = 0.5px ; 1px = 2rpx)
要导入出站样式表，请使用@import语句，后跟相对路径和;在声明的末尾。
Code snippet "@import" example.
/* app.wxss*/
@import "outbound.wxss" ;微信框架无法支持很多标准CSS选择器，例如级联选择器。
支持的选择器：
微信推荐：
微信框架为开发者提供了大量的基础组件，详尽的组件列表在这里。
<navigator>是 html 中的锚点。它用于从一个页面链接到另一页面。 navigator 元素最重要的属性是open-type 。
Code snippet "navigator" example.
<!-- .wxml -->
< view class =" btn-area " >
< navigator url =" /pages/index/index " hover-class =" navigator-hover " > text </ navigator >
< navigator url =" /pages/form/form " open-type =" redirect " hover-class =" other-navigator-hover " > text </ navigator >
< navigator url =" /pages/index/index " open-type =" switchTab " hover-class =" other-navigator-hover " > tab switching </ navigator >
</ view >导航器属性说明：
Open 类型值说明：
微信文档中的 Picker 组件分为三个选择器，默认的经典选择器，时间选择器和日期选择器。
下面的用例基于日期选择器，但另一个选择器的逻辑保持不变。
Code snippet "date picker" example.
<!-- .wxml -->
< picker mode =" date " value =" {{date}} " start =" 2015-09-01 " end =" 2020-09-01 " bindchange =" bindDateChange " >
< view class =" picker " >
Now the date is {{date}}
</ view >
</ picker > // .js
Page ( {
data : {
date : '2017-05-20'
} ,
bindDateChange : function ( e ) {
this . setData ( {
date : e . detail . value
} )
}
} )日期选择器属性：
开关是具有两种状态的视觉切换：打开和关闭。
Code snippet "switch" example.
<!-- .wxml -->
< view class =" body-view " >
< switch checked bindchange =" switch1Change " />
< switch bindchange =" switch2Change " />
</ view > // .js
Page ( {
switch1Change : function ( e ) {
console . log ( 'switch1 a change event occurs with the value' , e . detail . value )
} ,
switch2Change : function ( e ) {
console . log ( 'switch2 a change event occurs with the value' , e . detail . value )
}
} )切换属性：
Toast 是一种非模态元素，用于显示简短且自动过期的组件以通知用户。
在下面的代码片段中，我们伪造了一个表单提交来展示 toast 是如何工作和显示的。
Code snippet "spinner btn and toast" example.
<!-- .wxml -->
< form bindsubmit =" bindFormSubmit " >
< button type =" primary " form-type =" submit " loading =" {{loading}} " > Send </ button >
</ form >在上面的代码片段中，我们创建了一个动态按钮，其目的是提交表单。当您单击按钮时，加载微调器会为该按钮提供动画效果。
然后我们使用wx.showToast API 显示一个 toast 来通知用户。
Page ( {
data : {
loading : false
} ,
bindFormSubmit : function ( e ) {
// Enable loading animation on send btn
this . setData ( {
loading : ! this . data . loading
} )
// Loading toast
wx . showToast ( {
title : 'Sending...' ,
icon : 'loading' ,
duration : 1500
} )
}
} )模态框允许在页面上覆盖一个小元素。模式框的主要好处是它们避免了使用传统窗口弹出窗口或页面重新加载的需要。
模态框常用的情况有五种：
Code snippet "modal to inform" example.
wx . showModal ( {
title : 'Modal title' ,
content : 'Modal content ' ,
confirmText : "Ok" ,
showCancel : false ,
success : function ( res ) {
console . log ( 'success' )
}
} )模态参数：
map组件是一个原生组件，它有很长的属性列表，我们将介绍主要的属性。这里是微信文档链接，了解更多详情。
map属性列表：
Code snippet "map component" example.
< map id =" map " longitude =" 113.324520 " latitude =" 23.099994 " scale =" 14 " controls =" {{controls}} " bindcontroltap =" controltap " markers =" {{markers}} " bindmarkertap =" markertap " polyline =" {{polyline}} " bindregionchange =" regionchange " show-location style =" width: 100%; height: 300px; " > </ map >如果您想了解微信通过 API 提供的基于位置的服务，请参阅 wiki 的基于位置的服务部分。
微信推荐：
wx.getLocation需要指定type为gcj02 本节旨在解释如果您想要保留应用程序数据并在数据库中获取数据，则必须遵循的不同步骤。我们选择 Leancloud.cn 是因为它对于初学者来说安装简单。
首先介绍一些背景信息：下面的示例基于一个小程序，旨在通过简单的表单收集反馈。该小程序保存了Leancloud.cn上收集的数据。我们将解释如何获取和显示存储在数据库上的数据。为了说明第二部分（获取数据），我们创建了一个新页面，显示 Leancloud 上存储的所有评论。
以下是用于创建本教程的项目的 Github 存储库。
规格：
Code snippet "create a form" example.
<!-- pages/form/form.wxml -->
< form bindsubmit =" bindFormSubmit " >
< view > About the workshop </ view >
< view > Generally how was this workshop? </ view >
< text > Hints: takeaway, speed, time, location, people... </ text >
< view >
< textarea name =" review " maxlength =" -1 " />
</ view >
<!-- Refer to the Github repository above if you want the complete form -->
< button type =" primary " form-type =" submit " > Send </ button >
</ form >当如上所述创建表单的结构后，接下来我们需要创建由表单提交触发的事件。
//pages/form/form.js
Page ( {
data : {
loading : false ,
} ,
// Form Submission
bindFormSubmit : function ( e ) {
// Local storage
var review = e . detail . value . review
// ...
}
} )本地存储：在bindFormSubmit函数中，我们将用户的输入分配给本地变量，目的是测试是否可以在本地收集表单的用户输入。
在开始安装之前，如果您正在开发，请通过检查微信 IDE 中项目界面的最后一个复选框将您的域名列入白名单。对于特定的调试需求，您可以遵循这个 Leancloud 教程。
要开始 Leancloud 设置，首先在 Leancloud 上创建一个帐户。
现在您已准备好在小程序中安装和初始化 Leancloud，您可以按照他们的文档进行操作，该文档将让您完成两个步骤的过程：
appId和appKey来初始化应用程序。 // app.js
// Require Leancloud library (the av-weapp-min.js file you just add).
const AV = require ( './utils/av-weapp-min.js' ) ;
// Initialization of the app
AV . init ( {
appId : 't6hUVJfOwjHuWXuD9OE06rxxxxxxxxxxxx' ,
appKey : 'HndT17mJ7wAIxsv8uxxxxxxxxxx' ,
} ) ;如果您迷路了，请参阅该项目的 Github 存储库。
首先，创建一个名为model的新文件夹，并将form.js文件添加到该文件夹中。根据您想要保留的对象类型（在本例中为表单）命名您的文件。此步骤不是必需的，但可以让您的文件井井有条。
让我们创建对象：在刚刚创建的form.js文件中，需要您在util.js中安装的av-weapp-min.js并将其分配给AV常量。然后实例化Form对象。
Code snippet "require Leancloud and create an object" example.
// model/form.js
const AV = require ( '../utils/av-weapp-min.js' ) ;
class Form extends AV . Object {
}
// Register object
AV . Object . register ( Form , 'Form' ) ;
// Export object
module . exports = Form ;现在您已经实例化了Form对象，接下来创建表单对象以将数据封装在逻辑层（此处为 form.js），并在表单提交后重定向用户。
Code snippet "bindFormSubmit function" example.
const AV = require ( '../../utils/av-weapp-min.js' ) ;
const form = require ( '../../model/form.js' ) ;
// pages/form/form.js
bindFormSubmit: function ( e ) {
// Local storage
console . log ( e )
var review = e . detail . value . review
// ...
// Leancloud permissions
var acl = new AV . ACL ( ) ;
acl . setPublicReadAccess ( true ) ;
acl . setPublicWriteAccess ( true ) ;
// Leancloud storage
setTimeout ( function ( ) {
new Form ( {
review : review
// ...
} ) . setACL ( acl ) . save ( ) . catch ( console . error ) ;
// Redirect user
wx . reLaunch ( {
url : '/pages/wagon/wagon?form=1'
} ) ;
} , 2000 ) ;
}
} )代码片段汇报：
binFormSubmit函数中，我们添加了允许 Leancloud读取和写入我们创建并希望保留的对象的权限。setTimeout ，它将数据封装在新的Form对象中，并在提交表单时重定向用户。注意： setACL(acl)是 Leancloud 的内置属性。
到目前为止，一切都在您的小程序中完成，剩下要做的就是对 Leancloud 仪表板中收集的数据进行投影。
Form类）来创建该项目中的表。测试它以确保收集的数据持续存在于LeanCloud仪表板中。
首先，让我提醒您本节的背景。我们想在新页面中显示我们在LeanCloud上收集和坚持的评论列表。我认为您遵循了本教程的第一部分（如果您错过的话，请参见上文）。
规格：
review的新页面。因此，让我们创建一个新的评论页面和一个重定向到查看页面的按钮。 （提示：只需将路由路径添加到您的app.json ，框架将创建新的页面文件夹和文件）。
<!-- index.wxml -->
<!-- CTA redirects to review page -->
< view class =" cta-margin " >
< navigator url =" /pages/review/review " class =" btn-index " > Reviews </ navigator >
</ view >下一步是获取存储在LeanCloud上的数据并显示它。
Code snippet "fetch data stored on Leancloud and displays it" example.
<!-- review.wxml -->
< block wx:for =" {{forms}} " wx:for-item =" form " wx:key =" objectId " >
< text data-id =" {{form.objectId}} " >
{{form.review}}
</ text >
< text >
- {{form.name}}
</ text >
</ block >在上面，我们使用WX创建了一个列表渲染块wx:for显示创建评论的人的每个评论和名称。
// pages/review/review.js
// Require leancloud and object
const AV = require ( '../../utils/av-weapp-min.js' ) ;
const Form = require ( '../../model/form.js' ) ;
// Fetch data from Leancloud
Page ( {
data : {
forms : { }
} ,
onReady : function ( ) {
new AV . Query ( 'Form' )
. descending ( 'createdAt' )
. find ( )
. then ( forms => this . setData ( { forms } ) )
. catch ( console . error ) ;
} ,
} )代码片段汇报：
AV对象进行查询。forms数组来完成。在这种情况下，我们刚刚看到了如何存储我们本地收集到LeanCloud的数据以及如何从LeanCloud获取数据。
我们建议您阅读LeanCloud文档或检查Github存储库LeanCloud创建的LeanTodo迷你程序。
当您正在生产中时，您必须在微信平台中配置LeanCloud域名。遵循本LeanCloud教程。
您可以通过wx.getUserInfo访问的所有用户信息：
wx . getUserInfo ( {
success : function ( res ) {
var userInfo = res . userInfo
var nickName = userInfo . nickName
var avatarUrl = userInfo . avatarUrl
var gender = userInfo . gender //sex => 0: unknown ; 1: male ; 2：female
var province = userInfo . province
var city = userInfo . city
var country = userInfo . country
}
} )微信“ Quickstart”（微信样板）为您在app.js文件中提供了一个getUserInfo函数。顾名思义，此功能旨在获取用户信息。让我们逐步浏览此功能。
一般描述：
getUserInfo函数具有一个参数CB ，这也是一个函数。globalData的userInfo不是null， If传递getUserInfo函数的IF块。userInfo为null， getUserInfo函数调用登录接口。 // app.js
App ( {
getUserInfo : function ( cb ) {
var that = this
if ( this . globalData . userInfo ) {
typeof cb == "function" && cb ( this . globalData . userInfo )
} else {
// Login interface call
wx . login ( {
success : function ( ) {
wx . getUserInfo ( {
success : function ( res ) {
that . globalData . userInfo = res . userInfo
typeof cb == "function" && cb ( that . globalData . userInfo )
}
} )
}
} )
}
} ,
globalData : {
userInfo : null
}
} )第一种情况， userInfo表单globalData不是null
IF条件语句旨在确定是否传递CB参数以获取getUserInfo是一种函数类型，如果是函数类型，则它将通过userInfo 。
他们如何确定CB参数是否是函数？
// index.js
var app = getApp ( )
Page ( {
data : {
userInfo : { } ,
} ,
onLoad : function ( ) {
console . log ( 'onLoad' )
var that = this
app . getUserInfo ( function ( userInfo ) {
that . setData ( {
userInfo : userInfo
} )
} )
}
}让我们浏览index.js的onLoad功能
onLoad函数在应用程序实例上调用getUserInfo函数。userInfo更新为当前用户信息的参数。userInfo更新到app.js文件中的globalData 。第二种情况，UserInfo为null
userInfo为null getUserInfo函数，将返回调用登录接口的else语句。getUserInfo被称为并充当我们上面看到的if块。如果当前用户已经登录，则将用户信息通过index.js页面分配给onLaod函数的globalData页面。然后应用相同的逻辑。
微信小程序在其API中具有缓存机制。实际上，每个微型程序都有自己的本地缓存存储。
提醒：缓存存储用于存储我们想要快速访问的数据。它减少了用户的等待时间，因为与用于请求您的数据库的原始服务器相比，本地高速缓存可以满足该请求的满足。
缓存存储提供两种将数据存储在缓存中的方法：
wx.setStorage ： wx . setStorage ( { key : 'name' , data : 'Thibault' } ) ; wx.setStorage构建参数作为JSON，是指定存储的密钥和数据以指定要存储的键值的键。
wx.setStorageSync ： wx . setStorageSync ( 'name' , 'Thibault' ) ; wx.setStorageSync语法更简单，参数直接传递。并可以通过传入的回调功能获取数据。
微信在缓存上提供了三个主要动作：
wx.setStorage或wx.setStorageSync中。wx.getStorage或wx.getStorageSync中读取数据。wx.clearStorage或wx.clearStorageSync的清除数据。wx.removeStorage或wx.removeStorageSync中的数据。 Code snippet "set cache (synchronous method)" exemple 。
<!-- index.wxml -->
< input style =" input " placeholder =" Input data " bindinput =" inputEvent " />
< button type =" warn " bindtap =" saveToCache " > Save data to cache </ button >
< button type =" primary " bindtap =" jumpToPage " > Jump to another page </ button > // index.js
Page ( {
data : {
inputInfo : ''
} ,
jumpToPage : function ( ) {
wx . navigateTo ( {
url : "../show/show"
} ) ;
} ,
inputEvent : function ( e ) {
console . log ( e . detail . value )
this . setData ( {
inputInfo : e . detail . value
} )
} ,
saveToCache : function ( ) {
wx . setStorage ( { key : 'inputInfo' , data : this . data . inputInfo ,
success : function ( res ) {
console . log ( res )
}
} )
}
} ) Code snippet "Fetch data from the cache and display data in a new page (synchronous method)" exemple 。
<!-- show.wxml -->
< view > Data you saved to cache:{{inputInfo}} </ view > // show.js
Page ( {
data : {
inputInfo : ''
} ,
onLoad : function ( options ) {
var that = this ;
wx . getStorage ( {
key : 'inputInfo' ,
success : function ( res ) {
console . log ( res )
that . setData ( {
inputInfo : res . data ,
} )
}
} )
}
} )您可以使用wx.scanCode API调用客户端代码扫描仪UI 。它通过CTA按钮直接访问微信扫描仪，目的是扫描QR码。
Code snippet "call up client code scanner" example.
<!-- .wxml -->
< view class =" btn-area " >
< button bindtap =" bindScan " > Scan </ button >
</ view > // .js
bindScan: function ( ) {
console . log ( 'scanner' )
wx . scanCode ( {
success : ( res ) => {
console . log ( res )
}
} )
}微信API提供了一套基于位置的服务：
wx.chooseLocation选择要显示的位置。wx.getLocation获取当前用户位置。wx.openLocation在其贴上地图视图上显示位置。wx.createMapContext个性化地图。 Code snippet "get location" example.
<!-- .wxml -->
< button type =" primary " bindtap =" listenerBtnGetLocation " > Get location </ button > // .js
listenerBtnGetLocation: function ( ) {
wx . getLocation ( {
type : 'wgs84' ,
success : function ( res ) {
var latitude = res . latitude
var longitude = res . longitude
var speed = res . speed
var accuracy = res . accuracy
console . log ( res )
}
} )
}在上面，我们使用wx.getLocation通过获得纬度和经度来检索当前用户位置。
wx.getLocation进一步详细信息：如果用户离开微型程序，但在他的聊天顶部显示，您可以继续致电wx.getLocation ，因此可以不断地获取用户位置。
在微信中显示当前用户位置的内置地图： wx.openLocation API调用，启用Wechat内置地图视图的打开，以显示您从listenerBtnGetLocation函数中获得的位置。
注意： wx.openLocation API调用，将用户重定向到新的地图窗口。
Code snippet "display the current user location" example.
// .js
listenerBtnGetLocation: function ( ) {
wx . getLocation ( {
type : 'wgs84' ,
success : function ( res ) {
var latitude = res . latitude
var longitude = res . longitude
wx . openLocation ( {
latitude : latitude ,
longitude : longitude ,
scale : 28
} )
}
} )
}微信图像API提供四种可能性：
wx.chooseImage可以从专辑或相机中选择图像。wx.previewImage在上传应用程序之前预览图像。wx.getImageInfo获取图像信息（高度，宽度，路径，SRC）。wx.saveImageToPhotosAlbum可以将图像从迷你程序保存到您的专辑。在下面的示例中，我们创建了一个称为listenerBtnChooseImage的函数，目的是使用wx.chooseImage调用用户相册或相机。然后，我们使用wx.getImageInfo获取图像信息。
Code snippet "upload an image from album or camera" example.
<!-- .wxml -->
< button type =" primary " bindtap =" listenerBtnChooseImage " > Upload Image </ button >
<!-- Display the image user upload -->
< image src =" {{src}} " mode =" aspecFill " bindlongtap =" imgLongTap " /> // .js
Page ( {
data : {
src : [ ]
} ,
listenerBtnChooseImage : function ( ) {
var that = this
// Upload an image
wx . chooseImage ( {
count : 1 ,
sizeType : [ 'original' , 'compressed' ] ,
sourceType : [ 'album' , 'camera' ] ,
success : function ( res ) {
console . log ( 'success' )
that . setData ( {
src : res . tempFilePaths
} )
// Get image info
wx . getImageInfo ( {
src : res . tempFilePaths [ 0 ] ,
success : function ( res ) {
console . log ( res . width )
console . log ( res . height )
console . log ( res . path )
}
} )
}
} )
}
} )现在，我们在页面上有一个图像，让我们通过长时间敲击图像来将图像从迷你程序中保存到当前用户相册。
Code snippet "long tap the image to save it within user album" example.
<!-- .wxml -->
< image src =" {{src}} " mode =" aspecFill " bindlongtap =" imgLongTap " /> // .js
Page ( {
data : {
src : [ ]
} ,
listenerBtnChooseImage : function ( ) {
var that = this
// Upload an image
wx . chooseImage ( {
count : 1 ,
sizeType : [ 'original' , 'compressed' ] ,
sourceType : [ 'album' , 'camera' ] ,
success : function ( res ) {
console . log ( 'success' )
that . setData ( {
src : res . tempFilePaths
} )
// Get image info
wx . getImageInfo ( {
src : res . tempFilePaths [ 0 ] ,
success : function ( res ) {
console . log ( res . width )
console . log ( res . height )
console . log ( res . path )
}
} )
}
} )
} ,
// Longtap function
imgLongTap : function ( ) {
// Save image to album
wx . saveImageToPhotosAlbum ( {
filePath : this . data . src ,
success ( res ) {
wx . showToast ( {
title : 'Save' ,
icon : 'success' ,
duration : 1500
} )
console . log ( 'success' )
}
} )
}
} )微信网络API提供常见的HTTPS请求，Websocket，上传和下载文件。
wx.request提出标准的HTTPS请求。wx.uploadFile将文件上传到指定的服务器。wx.downloadFile从指定的服务器下载文件。 
在下面的示例中，我们有一个功能和一个事件处理程序： addNewPost和onPullDownRefresh ，如他们的名字所述，您应该能够添加新帖子并使用wx.request呼叫获取帖子。
Code snippet "making a POST HTTPS request" example.
<!-- .wxml -->
<!-- Add Posts -->
< input confirm-type =" send " bindconfirm =" addNewPost " placeholder =" Add a new post! " /> // .js
Page ( {
data : {
posts : [ ]
} ,
addNewPost : function ( e ) {
var that = this
var message = e . detail . value
// Add a new post
wx . request ( {
url : 'example.php' , // just an example address
method : 'post' ,
data : {
post : {
content : message
}
} ,
header : {
'content-type' : 'application/json'
}
} )
}
} )现在我们已经发布了，让我们将其显示到视图层。为简单起见，我们将利用Onpulldownrefresh重新加载新帖子。
Code snippet "making a GET HTTPS request" example.
<!-- .wxml -->
<!-- Display Posts -->
< block wx:for =" {{posts}} " wx:for-item =" post " >
< text > {{post.content}} </ text >
</ block >
<!-- Add Posts -->
< input confirm-type =" send " bindconfirm =" addNewPost " placeholder =" Add a new post! " /> // .js
Page ( {
data : {
posts : [ ]
} ,
addNewPost : function ( e ) {
var that = this
var message = e . detail . value
// Add a new post
wx . request ( {
url : 'example.php' , // just an example address
method : 'post' ,
data : {
post : {
content : message
}
}
} )
} ,
// onPullDownRefresh must first be enabled in the config.
onPullDownRefresh : function ( ) {
var that = this
// by default the request is a GET.
wx . request ( {
url : 'example.php' ,
header : {
'content-type' : 'application/json'
} ,
success : {
that . setData ( {
posts : res . data // Set the Page data for posts to the response data.
} )
}
} )
}
} ) 沿着我们的微型编程创建路径，我们遇到了问题和问题，我们想与您分享。如果您有一些想分享的问题，请与我们联系。
微信仅允许拥有ICP许可证的API，因此您可以忘记西方国家熟悉的大多数API。
这是中国可用的API目录，请检查一下。
background-image:属性图像无法通过CSS背景图像获得background-image: url(../../images/banner.png); 。我知道这很可怕，但是我们必须处理。
有两种绕过这种挫败感的方法：
您可以使用CSS background-image:但是您不能使用房地产路径，必须在base64中编码图像，然后将其传递给background-image: url(base64 image); 。这是在基本64中编码图像的工具。
或者，您可以使用<image>标签并使用<image>标签属性像mode一样处理图像。微信有13个模式，9个是切割模式，而4个是缩放模式。这是指向文档的链接。
RPX代表响应式像素，这是微信小程序的单位。根据官方定义， rpx基于自适应屏幕宽度。
实际上，RPX单元基于代表“ root em”的rem单元。为什么不em单位？
em单元相对于父母的字体大小，这会导致复合问题。 rem单元相对于Conteract的根部元素（字体尺寸职责）。
但是，要返回rpx单元， RPX的优势是：
您正在制作微型程序吗？如果您想分享您的工作，与我们的工作人员见面，请寻求帮助，请与我们联系！
如果您想贡献，可以在此处发送拉动请求，也可以在上海（AT）Lewagon.com上大喊大叫！
