微信小程序开发常用功能 (4)

示例代码

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  

效果

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgyfdd.html