小程序配置
app.json文件小程序设置全局配置 ，包括页面路径、窗口、选项卡，以及网络超时等
//打开另一个小程序
wx.navigateToMiniProgram({
//要打开的小程序的APPID
appId: '',
//打开的页面的路径，如果为空则打开的是首页
path: 'page/index/index?id=123',
//需要传递给目标小程序的数据
extraData: {
foo: 'bar'
},
//要打开的小程序的版本 develop-开发版 trial-体验版 release-正式版
envVersion: 'develop',
success(res) {
// 打开成功
}
})
//打开另一个小程序 wx.navigateToMiniProgram({ //要打开的小程序的APPID appId: '', //打开的页面的路径，如果为空则打开的是首页 path: 'page/index/index?id=123', //需要传递给目标小程序的数据 extraData: { foo: 'bar' }, //要打开的小程序的版本 develop-开发版 trial-体验版 release-正式版 envVersion: 'develop', success(res) { // 打开成功 } })
通过app.js文件中App()来注册一个小程序 提供了生命周期方法
App({
onLaunch: function() {
// Do something initial when launch.
},
onShow: function() {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
globalData: 'I am global data'
})通过全局的getApp()函数，获取小程序实例
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data注意：
App() 必须在 app.js 中注册，且不能注册多个。
不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 还没有生成。
通过 getApp() 获取实例之后，不要私自调用生命周期函数。
通过Page() 函数用来注册页面
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize 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.
},
onPullDownRefresh: function() {
// Do something when pull down.
},
onReachBottom: function() {
// Do something when page reach bottom.
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
})
},
customData: {
hi: 'MINA'
}
})小程序常用API接口
wx.request https网络请求
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
method:"GET",
data: {
x: '' ,
y: ''
},
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log(res.data)
}
})下拉刷新，在json中写上
"enablePullDownRefresh": true
wx.stopPullDownRefresh(); 返回上面的数据
// 显示顶部刷新图标
wx.showNavigationBarLoading() 微信支付接口
wx.requestPayment({
'timeStamp': "", //时间戳
'nonceStr': "", //随机字符串
'package': "",
'signType': "",
'paySign': "",
'success': function(res) {
wx.showToast({
title: '支付成功',
})
},
'fail': function(res) {},
'complete': function(res) {}
})本地缓存
通过key的形式添加缓存setStorage （异步接口）
wx.setStorage({
key:"key"
data:"value"
})通过key的形式获取缓存getStorage （异步接口）
wx.getStorage({
key: 'key',
success: function(res) {
console.log(res.data)
}
})从本地缓存中异步移除指定 key
wx.removeStorage({
key: 'key',
success: function(res) {
console.log(res.data)
}
})清理本地数据缓存（清除全部的缓存）
wx.clearStorage();显示、隐藏消息提示框
wx.showToast({
title: '加载中',
icon: 'loading',
duration: 10000
})
setTimeout(function(){
wx.hideToast()
},2000)动态设置当前页面的标题
修改json的内容
wx.setNavigationBarTitle({
title: '当前页面'
})导航
保留当前页面，跳转到应用内的某个页面
wx.navigateTo({
url: 'test?id=1'
})关闭当前页面，跳转到应用内的某个页面
wx.redirectTo({
url: 'test?id=1'
})跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.switchTab({
url: '/index' //不能传递参数
})拨打电话
wx.makePhoneCall({
phoneNumber: '1340000' //仅为示例，并非真实的电话号码
})获取当前的地理位置、速度
wx.getLocation({
type: 'wgs84',
success: function(res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
}
})获取系统信息（异步接口）
wx.getSystemInfo({
success: function(res) {
console.log(res.brand)//设备品牌
console.log(res.model) //设备型号
console.log(res.pixelRatio) //设备像素
console.log(res.windowWidth) //可使用窗口宽度，单位px
console.log(res.windowHeight)可使用窗口高度，单位px
console.log(res.statusBarHeight)//状态栏的高度，单位px
console.log(res.language)//微信设置的语言
console.log(res.version)//微信版本号
}
})获取网络类型
wx.getNetworkType({
success: function(res) {
var networkType = res.networkType // 返回网络类型2g，3g，4g，wifi
}
}全屏预览图片
在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作
//xhtml
<view class='detail_img'>
<view class='view_img' wx:for="{{imglist}}" wx:for-item="image">
<image src='{{image}}' data-src="{{image}}" bindtap="previewImage">
</image>
</view>
<view style='clear:both;'></view>
</view>
//js
Page({
data: {
imglist: ['图片1','图片2','图片3']
},
/**
* 预览图片
*/
previewImage: function(e) {
var current = e.target.dataset.src;
wx.previewImage({
current: current, // 当前显示图片的http链接
urls: this.data.imglist // 需要预览的图片http链接列表
})
},
})
// css
.view_img{
width: 750rpx;
}
.view_img image{
width: 100%;
display: block;
padding: 0;
}上拉加载，下拉刷新
上拉加载
如果你使用的是<scroll-view>组件：他有一个事件叫做：bindscrolltolower，滚动到底部/右边，会触发 scrolltolower 事件。
// wxml
<scroll-view
class="grid-container"
scroll-y="true"
scroll-x="false"
bindscrolltolower="onScrollLower">
// 你的代码
</scroll-view>
// js
onScrollLower: function (event) {
var nextUrl = this.data.requestUrl +
"?start=" + this.data.totalCount + "&count=20";
util.http(nextUrl, this.processDoubanData)
wx.showNavigationBarLoading()
},如果你使用<view>，你就不需要在元素里面绑定任何事件，直接在js文件里面申明：
onReachBottom: function (event) {
// 请求借口，加载数据，并更新数据
var nextUrl = this.data.requestUrl +
"?start=" + this.data.totalCount + "&count=20";
util.http(nextUrl, this.processDoubanData);
wx.showNavigationBarLoading(); // 显示loading
},下拉刷新
//json
{
"enablePullDownRefresh": true
}
//js
onPullDownRefresh: function (event) {
var refreshUrl = this.data.requestUrl +
"?start=0&count=20";
this.data.movies = {};
this.data.isEmpty = true;
this.data.totalCount = 0;
util.http(refreshUrl, this.processDoubanData);
wx.showNavigationBarLoading();
},小程序主动更新
const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function(res) {
// 请求完新版本信息的回调
console.log(res.hasUpdate)
})
// 下载新版本
updateManager.onUpdateReady(function() {
wx.showModal({
title: '更新提示',
content: '新版本已经准备好，是否重启应用？',
success(res) {
if (res.confirm) {
// 重启应用
updateManager.applyUpdate()
}
}
})
})
// 新版本下载失败
updateManager.onUpdateFailed(function(res) {
console.log(res)
})测试
当小程序想要开启云开发时，必须知道小程序的APPID，在开启云开发是需要选择分支的-Dev或者master分支
隐藏home键
wx.hideHomeButton()当小程序没有tabber时，会自动产生一个home键，点击会返回小程序中设定的“首页” 使用wx.hideHomeButton();会隐藏home键
扫一扫
5125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
