小程序开发参考手册

Posted 2020-12-03 流芳

导航跳转

wx.navigateTo
保留当前页面，跳转到应用内的某个页面，不能跳转到 tabBar 页面，使用wx.navigateBack可以返回到原页面。
wx.redirectTo
关闭当前页面，跳转到应用内的某个页面。
wx.reLaunch
关闭所有页面，打开到应用内的某个页面。
wx.switchTab
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

点击跳转

<text data-id=‘9‘ bindtap="gotolist">点击跳转</text>
gotolist:function(e){
var id = e.currentTarget.dataset.id
wx.navigateTo({
url: ‘list?id=‘ + id
})
}

 

接收参数

onLoad: function (options) {
var that = this
if (options.id){
that.setData({
id: options.id,
})
}}

 

get/post 请求

wx.request({
url:"",
data:{
session:wx.getStorageSync(‘session‘)
},
success: function (res) {
console.log(res.data)
}
})

 

多维数组

data: {
  list:{
    listid:‘‘,
    listimg: ‘‘
  }
}
that.setData({
  "list[0].listid": options.id,
  "list[0].listimg": options.img
})

 

模板
<template name="listimg">
<view><image src=‘{{listimg}}‘ /></view>
</template>

引入模板
<import src="../../template/list.wxml"/>
<template is="listimg" data="{{...list[0]}}"/>

模板里判断变量
<view wx:if="{{ischange > 0}}">为真</view><view wx:else>为假</view>

循环列表
<view wx:for="{{listcont}}" wx:key="listcont">
<image src=‘{{item.litpic}}‘ />
<view>{{item.date}}</view>
</view>

嵌套循环
<text wx:for="{{array}}" wx:for-index="key" wx:for-item="value">
{{key}}--{{value}}
</text>

配置参数 config.js

var DOMAIN = "www.domain.com";
var WEBSITENAME = "网站名称";
var INDEXNAV = [{id:"1",name:"参数1"},{id:"2",name:"参数2"}]
export default {
getDomain: DOMAIN,
getWebsiteName: WEBSITENAME,
getIndexNav: INDEXNAV
}

 

引入参数文件 并配置公共函数 api.js

import config from ‘config.js‘
var domain = config.getDomain;
var website = config.getWebsiteName;
var indexnav = config.getIndexNav;

module.exports = {
getname:function(obj){
return website;
},

getindexnav:function(obj){
return indexnav;
}
}

 

引入公共函数
var Api = require(‘../../utils/api.js‘)
Api.getname()

 

var app = getApp()//先实例化应用
app.commonFunction()//子页面中调用公共app.js的commonFunction方法

提交表单

formSubmit:function(e){
for (var key in e.detail.value){
if(!e.detail.value[key]){
return false;
}
}
wx.showToast({
title: ‘提交成功‘,
icon: ‘success‘,
duration: 2000,
mask: true
})
}

 

关于that和this用法
微信小程序中，在wx.request({});方法调用成功或者失败之后，有时候会需要获取页面初始化数据data的情况，这个时候，如果使用，this.data来获取，会出现获取不到的情况，调试页面也会报undefiend。原因是，在javascript中，this代表着当前对象，会随着程序的执行过程中的上下文改变，在wx.request({});方法的回调函数中，对象已经发生改变，所以已经不是wx.request({});方法对象了，data属性也不存在了。官方的解决办法是，复制一份当前的对象，如下：

var that=this;//把this对象复制到临时变量that

在success回调函数中使用that.data就能获取到数据了。
不过，还有另外一种方式，也很特别，是将success回调函数换一种声明方式，如下：

success: res =>{
this.setData({
loadingHidden: true,
hideCommitSuccessToast: false
})
}

在这种方式下，this可以直接使用，完全可以获取到data数据。

page的生命周期方法
onLoad 是生命周期函数,用来监听页面加载,一个页面只会调用一次,只有onload中有options参数，可以获取页面传值等等
onReady 是生命周期函数,用来监听页面初次渲染完成,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互.对页面的设置请在onReady之后设置,如wx.setNavigationBarTitle.
onShow 生命周期函数,用来监听页面显示,每次页面打开都会调用一次.
onHide 生命周期函数,监听页面隐藏,当wx.navigateTo或者底部tab切换之后调用
onUpload 生命周期函数,用来监听页面卸载.当wx.navigateTo和 navigateBack的时候调用.
onPullDownRefresh 页面相关事件处理函数,用来监听用户的下拉动作.但是需要在config的window选项中开启enablePullDownRefresh,当数据刷新完成之后,可以用wx.stopPullDownRefresh停止当前页面的下拉刷新.

尺寸单位
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx
注：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

 

设置底部导航 app.json

"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#666666",
"borderStyle": "white",
"list": [
{
"selectedIconPath": "images/homeb.png",
"iconPath": "images/home.png",
"pagePath": "pages/index/index",
"text": "首页"
},
{
"selectedIconPath": "images/fireb.png",
"iconPath": "images/fire.png",
"pagePath": "pages/index/recom",
"text": "推荐"
},
{
"selectedIconPath": "images/huodb.png",
"iconPath": "images/huod.png",
"pagePath": "pages/index/activity",
"text": "活动"
},
{
"selectedIconPath": "images/userb.png",
"iconPath": "images/user.png",
"pagePath": "pages/index/user",
"text": "我的"
}
]
}