支付宝小程序笔记

一、小程序配置文件

1、app.json全局配置

• pages 配置项

用于设置小程序的页面组成，接受一个数组，每一项都是字符串。

以下是 app.json 中 pages 的配置示例：

{
  "pages":[ "pages/index/index", "pages/logs/logs" ] }123456

注意：
    1. 数组的第一项代表小程序的初始页面。
    2. 小程序中新增/减少页面，都需要对 pages 数组进行修改。
    3. 文件名不需要写文件后缀，因为框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件进行整合。1234

• window 配置项

用于设置小程序的状态栏、导航条、标题、窗口背景色。

以下是 app.json 中 window 的配置示例：

{
  "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" } }123456789

• tabBar 配置项

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

属性说明：

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

以下是 app.json 中 tabbar 的配置示例：

"tabBar": {
        "color": "#ddd",
        "selectedColor": "#3cc51f",
        "backgroundColor": "#fff",
        "borderStyle": "black",
        "list": [
            {
                "pagePath": "pages/components",
                "text": "组件",
                "iconPath": "images/icon_components@3x.png",
                "selectedIconPath": "images/icon_components_active@3x.png"
            },
            {
                "pagePath": "pages/interface",
                "text": "接口",
                "iconPath": "images/icon_interface@3x.png",
                "selectedIconPath": "images/icon_interface_active@3x.png"
            }
        ]
    }1234567891011121314151617181920

注意：
    1. 当设置 position 为 top 时，将不会显示 icon。
    2. tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。123

2、page.json 页面配置

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}1234567
注意：页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键，

二、小程序注意

1、关于返回按钮

返回按钮是出栈操作，如果导航跳转用navigateTo，会保留当前页面，也就是将当前页面入栈，当返回的时候会将当前页面出栈，使用redirectTo，会使当前页面出栈，my.reLaunch（{}）关闭所有页面，跳转到指定页面，my.navigateBack根据页面栈返回不同深度，如果这里传递的深度大于当前页面栈长度，则返回首页

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。返回按钮即为出栈操作

注意：不要尝试修改页面栈，会导致路由以及页面状态错误。

框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候，页面栈的表现如下：

2、小程序与h5页面通信

<web-view /> 组件是一个可以用来承载H5网页的组件，会自动铺满整个小程序页面。
每个页面只能有一个<web-view />，请不要渲染多个<web-view />，会自动铺满整个页面，并覆盖其它组件。

注意 这里的链接域名必须添加在小程序H5域名白名单里面

<!-- axml -->
<!-- 指向支付宝首页的web-view -->
<web-view src="https://ds.alipay.com/" onMessage="test"></web-view>

微信小程序访问html页面是通过小程序中的WebView作为网页承载容器实现的，通过配置WebView的src属性进行html页面的加载；当html返回小程序需要引用小程序类库，调用指定接口进行跳转。 目前小程序与html交互，都是通过跳转链接的参数拼接进行数据的传递的

• 小程序跳转到html

1、小程序跳转到html,需要配置跳转地址到指定的域名白名单内

2、在白名单配置的域名服务器根目录下添加签名文件，文件名如：mAPifgWWWz.txt ，内容如：e1756a5045b2504b499cc1cce1d2c605
3、在页面内添加webView组件，配置地址：

index.wxml <web-view src="{ { urlPath}}"></web-view>

index.js
  data: { urlPath:'https://visualstreet.cn/website/index.html?path=web-view&mytest=showWebView' },

当小程序调用html时，可以在WebView的src中写入html地址；
eg:https://res.wx.qq.com/index.html;
当小程序调用html希望是登录状态时，需要将登录信息以参数形式传递给html；
eg:https://res.wx.qq.com/index.html?user=111&unionId=222;
html页面window.onload将触发进行参数的获取：

window.onload = function() {
    console.log(document.location);
    console.log(window.location);
    document.getElementById("txtMsg").innerText=document.location.href;
    document.getElementById("txtDetail").innerText=window.__wxjs_environment;

}

并且可以通过

window.__wxjs_environment

得到小程序的来源

• html 跳转到小程序

webView内html页面可以跳转回指定的小程序页面，也就是html页面可以经过一系列操作，将结果参数返回给小程序即可；
使用html返回小程序需要在返回的html页面引用小程序类

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

调用小程序类中的指定接口进行返回

wx.miniProgram.navigateTo( )
wx.miniProgram.navigateBack( )
wx.miniProgram.switchTab( )
wx.miniProgram.reLaunch( )
wx.miniProgram.redirectTo( )
wx.miniProgram.postMessage( )
wx.miniProgram.getEnv( )

当html 跳转回小程序时，可以通过到小程序指定router在该页面获取参数信息；

eg: wx.miniProgram.navigateTo( 'login/index?htmlvalue=12dasf&htmlvalue2=231')

3、my.getSystemInfo 获取设备系统信息

windowWidth 这个属性是窗口宽度，并非是屏幕宽度，如果获取屏幕宽度，应该使用screeWidth

4、表单元素需要找到默认的类名来修改样式

.a-textarea-content{ font-size: 30rpx; color: #333333; font-family: '微软雅黑'; }
.a-input-content{ font-size: 30rpx; color: #333333; font-family: '微软雅黑'; }