渲染层：wxml+wxss
逻辑：javascript
配置：JSON
app.js 小程序逻辑
app.json 小程序公共设置
app.wxss 小程序公共样式表
数据渲染
数组渲染：
<view wx:for="{{list}} wx:key="*this">
{{index}}
{{item.name}}
</view>对象渲染：
<view wx:for="{{person}} wx:for-item="value" wx:for-index="key" wx:key="key">
{{key}}---{{value}}
</view>
条件渲染：
<view wx:if="{{false}}"> 1 </view>
<view wx:elif="{{false}}"> 2 </view>
<view wx:else> 3 </view>
<view hidden> 333 </view>
注意：
标签频繁切换显示的时候用 hidden （display样式控制） 用hidden的时候不要用display:flex
标签不频繁切换显示用 wx:if （把标签从页面结构移除）
在事件中获取参数： 案列：购物车的加减
在wxml中
<view>
<button bindtap="handletap" data-ope="{{1}}" ></button>
<button bindtap="handletap" data-ope="{{-1}}"></button>
{{num}}
</view>在js中
data:{
num:0
}
handletap(e){
let ope = e.currentTarget.dataset.ope
this.setData({
num: this.data.num + ope
})
}
获取input中输入的值
在wxml中
<input type="text" bindinput="handleinput" />
在js中
handleinput(e){
this.setDate({
num: e.detail.value
})
}
flex-grow
https://blog.csdn.net/m0_37058714/article/details/80765562
登录逻辑：
// redirect.js navigator.js
const util = require('../../utils/util.js')
Page({
data: {
},
onLoad: function (options) {
this.setData({
title: "填写投保信息"
})
},
onShow:function(){
let that=this;
wx.login({
success(res){
if(res.code){
that.data.code=res.code
}
}
})
},
// 获取用户信息函数
onGotUserInfo(e) {
let that = this;
// 调用wx.login
if(this.data.code){
// 上传保存用户信息
util.post(
"/api/saveup",
{
code: this.data.code,
iv: e.detail.iv,
encryptedData: e.detail.encryptedData
},
that.succ
)
}else{
wx.login({
success(res) {
if (res.code) {
// 上传保存用户信息
util.post(
"/api/saveup",
{
code: res.code,
iv: e.detail.iv,
encryptedData: e.detail.encryptedData
},
that.succ
)
} else {
util.toast('授权失败，请稍后重试！')
}
}
})
}
},
// 保存用户信息成功
succ(res) {
if (res.data.success) {
this.data.token=res.data.token;
wx.setStorageSync('token', res.data.token)
this.getuser()
}else{
util.toast(res.data.msg,'请稍后再试！')
}
},
// 获取用户信息
getuser() {
if(this.data.token){
util.post(
'/api/get_user_info',
{ token: this.data.token},
this.tokenSucess
)
}else{
util.toast('用户信息获取失败，请稍后重试！')
}
},
// 获取用户信息函数
tokenSucess(res) {
if (res.data.success) {
wx.setStorageSync(
'userinfo',res.data.data
)
wx.switchTab({
url: '/pages/home/home',
success: function () {
util.toast('授权成功')
}
})
}else{
util.toast(res.data.msg,'请稍后重试！')
}
}
})
tabbar里携带不同的id跳转到不同的页面
wxml
<!-- 每一项 -->
<view class="navigator" wx:for="{{navList}}" wx:key="item" bindtap="handlebase" data-id="{{item.id}}">
<image src="{{host+item.src}}"></image>
<text>{{item.name}}</text>
</view>
js
handlebase(e) {
let id = e.currentTarget.dataset.id
console.log(id)
if (this.data.token) {
wx.navigateTo({
url: '/pages/insurance/insurance?id=' + id,
})
} else {
wx.showModal({
content: '提示',
content: '您暂未登录，部分功能暂时无法使用',
confirmColor: '#FE9D4A',
cancelText: '暂不登录',
confirmText:'前往登录',
success: function (res) {
if (res.confirm) {
wx.navigateTo({
url: '/pages/login/login',
})
}
}
})
}
},
触底操作：
onLoad: function (options) {
// 本地图片转base64 背景
var base64 = wx.getFileSystemManager().readFileSync;
this.setData({
token:wx.getStorageSync('token'),
'background': 'data:images/png;base64,' + base64(this.data.background, 'base64'),
})
//
this.getInsAmount();
},
// 客户信息获取
getInsAmount(){
util.post('/api/my_insure_fee',{token:this.data.token},this.getInsAmount_succ)
},
// 客户信息获取成功
getInsAmount_succ(res){
// console.log('客户信息获取成功',res)
if(res.data.success){
let insAmountList=this.data.insAmountList;
insAmountList=insAmountList.concat(res.data.data.userinfo);
this.setData({insAmountList:insAmountList,allpage:res.data.allpage,typeinfos:res.data.data.typeinfos})
}else{
util.toast(res.data.msg)
}
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
if(this.data.page<this.data.allpage){
this.data.page++;
this.getInsAmount();
}else{
util.toast('没有更多数据了~~');
}
},
函数防抖
// /*函数防抖*/ /*延迟函数执行。即不管debounce函数触发了多久，只在最后一次触发debounce函数时，才定义setTimeout，到达间隔时间再执行 需要防抖的函数。用处：多用于 input 框 输入时，显示匹配的输入内容的情况*/
function debounce(fn, interval) {
var timer;
var gapTime = interval || 1000;//间隔时间，如果interval不传，则默认1000ms
return function() {
clearTimeout(timer);
var context = this;
var args = arguments;//保存此处的arguments，因为setTimeout是全局的，arguments不是防抖函数需要的。
timer = setTimeout(function() {
fn.call(context,args);
}, gapTime);
};
}
函数节流
//函数节流是减少函数的触发频率，而函数防抖则是延迟函数执行，并且不管触发多少次都只执行最后一次
// /*函数节流*/ /*单位时间n秒内，第一次触发函数并执行，以后 n秒内不管触发多少次，都不执行。直到下一个单位时间n秒，第一次触发函数并执行，这个n秒内不管函数多少次都不执行。用处：多用于页面scroll滚动，或者窗口resize，或者防止按钮重复点击等情况 */
function throttle(fn, interval) {
var enterTime = 0;//触发的时间
var gapTime = interval || 300 ;//间隔时间，如果interval不传，则默认300ms
return function() {
var context = this;
var backTime = new Date();//第一次函数return即触发的时间
if (backTime - enterTime > gapTime) {
fn.call(context,arguments);
enterTime = backTime;//赋值给第一次触发的时间，这样就保存了第二次触发的时间
}
};
}
image标签
默认宽度320px,高度240px
swiper
swiper宽度 / swiper高度 = 原图宽度 / 原图高度
swiper高度 = swiper宽度 * 原图高度 / 原图宽
100vw 352 1125
swiper {
width:100%,
height: calc(100vw*352/1125)
}
image {
width：100%
}
https://docs.apipost.cn/view/a501a9898ac147b8#2066759
https://lanhuapp.com/web/#/item/project/board?pid=a54a24c2-0d93-42da-857f-2613ad8b4997
自定义组件
在根目录下新建components文件夹
在components文件夹下新建Tabs文件夹
在Tabs下右键新增Component,名字叫Tabs
哪个页面要使用自定义组件，就在哪个页面的json文件中声明
生命周期
onLaunch 应用第一次启动的时候触发
用途： 获取用户的个人信息
onShow(） 被用户看到的时候触发
用途： 对应的数据获取页面效果重置
onHide() 应用被隐藏了
用途：暂停或者清除定时器
onError(err) 应用的代码报错的时候触发
用途：在应用代码报错的时候，收集用户报错信息。通过异步请求，讲错误信息发送到后台
4960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
