示例代码
wx.previewImage({ current: \'\', // 当前显示图片的http链接 urls: [] // 需要预览的图片http链接列表 }) 页面跳转 跳转普通页面 wx.navigateTo({ url: \'\', })保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
跳转tabBar 页面跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
wx.switchTab({ url: \'/index\' }) 自定义组件在小程序中的组件和普通页面的 js 结构有很大差异,结构如下
// pages/TestComponent/test.js Component({ /** * 组件的属性列表 */ properties: { userName:"" }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { // 获取父组件传递过来的参数 getPropName(){ console.log(this.data.userName); } } })其中我们在 properties 对象中定义组件组件的属性列表
然后再组件中添加触发 getPropName 的方法
<button bind:tap="getPropName">获取名称</button>在我们需要引入这个组件的页面去声明这个组件的名称和地址,找到后缀为 json 的文件,添加如下代码
{ "usingComponents": { "test-component":"../TestComponent/test" } }之后我们在页面中像使用普通标签一样使用这个组件,并且给组件传递数据
<test-component userName="张三"></test-component>传递数据后我们即可实现点击组件中的按钮获取父组件传递过来的值
定义全局组件我们定义完组件后想要在全局使用,我们可以将这个组件定义为全局组件
首先找到项目中的 app.json 文件,找到 usingComponents 添加组件地址
{ ......省略其他代码 "usingComponents": { "test-component":"./pages/TestComponent/test" } }声明完成后我们即可在全局像使用标签的方式使用该组件
设置默认顶部导航栏样式在 app.json 中添加如下代码
{ "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#22a381", "navigationBarTitleText": "乐福健康", "navigationBarTextStyle": "white" } }全部参数列表
属性 类型 默认值 描述 最低版本navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如 #000000
navigationBarTextStyle string white 导航栏标题颜色,仅支持 black / white
navigationBarTitleText string 导航栏标题文字内容
navigationStyle string default 导航栏样式,仅支持以下值: default 默认样式 custom 自定义导航栏,只保留右上角胶囊按钮。 iOS/Android 微信客户端 7.0.0,Windows 微信客户端不支持
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle string dark 下拉 loading 的样式,仅支持 dark / light
backgroundColorTop string #ffffff 顶部窗口的背景色,仅 iOS 支持 微信客户端 6.5.16
backgroundColorBottom string #ffffff 底部窗口的背景色,仅 iOS 支持 微信客户端 6.5.16
enablePullDownRefresh boolean false 是否开启当前页面下拉刷新。 详见
onReachBottomDistance number 50 页面上拉触底事件触发时距页面底部距离,单位为px。 详见
pageOrientation string portrait 屏幕旋转设置,支持 auto / portrait / landscape 详见 响应显示区域变化 2.4.0 (auto) / 2.5.0 (landscape)
disableScroll boolean false 设置为 true 则页面整体不能上下滚动。 只在页面配置中有效,无法在 app.json 中设置
usingComponents Object 否 页面自定义组件配置 1.6.3
initialRenderingCache string 页面初始渲染缓存配置,支持 static / dynamic 2.11.1
style string default 启用新版的组件样式 2.10.2
singlePage Object 否 单页模式相关配置 2.12.0
restartStrategy string homePage 重新启动策略配置 2.8.0
效果