支付宝小程序笔记

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_41034171/article/details/81868131

一、小程序配置文件

1、app.json全局配置

属性 类型 必填 描述
page String Array 设置页面路径
window Object 设置默认页面的窗口表现
tabBar Object 设置底部 tab 的表现
networkTimeout Object 设置网络超时时间
debug Boolean 设置是否开启 debug 模式
  • pages 配置项

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

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

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

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

属性 类型 默认值 描述
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

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

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

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

属性说明:

属性 类型 必填 默认值 描述
color HexColor tab 上的文字默认颜色
selectedColor HexColor tab 上的文字选中时的颜色
backgroundColor HexColor tab 的背景色
borderStyle String black tabbar上边框的颜色, 仅支持 black/white
list Array tab 的列表,详见 list 属性说明,最少2个、最多5个 tab
position String bottom 可选值 bottom、top,设置成top是无图标

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

属性 类型 必填 说明
pagePath String 页面路径,必须在 pages 中先定义
text String tab 上按钮文字
iconPath String 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效
selectedIconPath String 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效

以下是 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. 当设置 positiontop 时,将不会显示 icon。
    2. tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。123

2、page.json 页面配置

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

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor 000000 导航栏背景颜色,如”#000000”
navigationBarTextStyle String white 导航栏标题颜色,仅支持 black/white
navigationBarTitleText String 导航栏标题文字内容
backgroundColor HexColor ffffff 窗口的背景色
backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark/light
enablePullDownRefresh Boolean false 是否开启下拉刷新,详见页面相关事件处理函数
disableScroll Boolean false 设置为 true 则页面整体不能上下滚动;只在 page.json 中有效,无法在 app.json 中设置该项
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为px
{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}1234567
注意:页面的.json只能设置 window 相关的配置项,以决定本页面的窗口表现,所以无需写 window 这个键,

二、小程序注意

1、关于返回按钮

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

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

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

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

路由方式 页面栈表现
初始化 新页面入栈
打开新页面 新页面入栈
页面重定向 当前页面出栈,新页面入栈
页面返回 当前页面出栈
Tab 切换 页面全部出栈,只留下新的 Tab 页面

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: '微软雅黑';
}
展开阅读全文

没有更多推荐了,返回首页