十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
排名不分先后,按自己的习惯来的。
创新互联公司于2013年开始,是专业互联网技术服务公司,拥有项目成都网站建设、成都网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元诏安做网站,已为上家服务,为诏安各地企业和个人服务,联系电话:18982081108
总结经验,不喜勿喷哦~
tab1 tab2 Page({ data:{ // tab切换 currentTab: 0, }, swichNav: function (e) { var that = this; if (this.data.currentTab === e.target.dataset.current) { return false; } else { that.setData({ currentTab: e.target.dataset.current }) } }, })
tab1 tab2 tab3 Page({ data:{ currentTab: 0, aheight: '' }, // 滑动切换 bindChange: function (e) { var that = this; that.setData({ currentTab: e.detail.current }); }, //点击tab切换 swichNav: function (e) { var that = this; if (this.data.currentTab === e.target.dataset.current) { return false; } else { that.setData({ currentTab: e.target.dataset.current }) } }, // swiper 自适应高度 onLoad: function (options) { var that = this wx.getSystemInfo({ success: function (res) { that.setData({ aheight: res.screenHeight }); } }) }, }) 页面1 页面2 页面3
.upload { width: 20%; float: left; margin-top:33rpx ; } .upload image{ width: 100%; } .logoinfo{ width: 20%; float: left; margin-right:2% ; } .del{ width: 20%; float: right; } .del image{ width: 100%; } .logoinfo image{ width: 100%; } page({ data:{ img_arr: [] }, // 图片上传 upimg: function () { var that = this; if (this.data.img_arr.length < 3) { wx.chooseImage({ sizeType: ['original', 'compressed'], success: function (res) { that.setData({ img_arr: that.data.img_arr.concat(res.tempFilePaths), }) } }) } else { wx.showToast({ title: '最多上传三张图片', icon: 'loading', duration: 3000 }); } }, // 删除图片 deleteImage: function (e) { var that = this; var index = e.currentTarget.dataset.index; //获取当前长按图片下标 console.log(that.data.img_arr) wx.showModal({ title: '提示', content: '确定要删除此图片吗?', success: function (res) { if (res.confirm) { console.log('点击确定了'); that.data.img_arr.splice(index, 1); } else if (res.cancel) { console.log('点击取消了'); return false; } that.setData({ img_arr: that.data.img_arr }); } }) }, // 上传 upload: function () { var that = this for (var i = 0; i < this.data.img_arr.length; i++) { wx.uploadFile({ url: 'https:***/submit', filePath: that.data.img_arr[i], name: 'content', formData: adds, success: function (res) { console.log(res) if (res) { wx.showToast({ title: '已提交发布!', duration: 3000 }); } } }) } this.setData({ formdata: '' }) }, // 提交 formSubmit: function (e) { console.log('form发生了submit事件,携带数据为:', e.detail.value) } })
.scroll-view_H{ white-space: nowrap; height: 600rpx; } .listb{ padding: 25rpx; white-space: normal; } 1 2
app.js
//app.js
App({
globalData: {
userInfo: null,
unionid:null,
token:''
},
onLaunch: function () {
/* 已授权之后,自动获取用户信息 */
// 判断是否授权
wx.getSetting({
success: (res) => { //箭头函数为了处理this的指向问题
if (res.authSetting["scope.userInfo"]) {
console.log("已授权");
// 获取用户信息
wx.getUserInfo({
success: (res) => { //箭头函数为了处理this的指向问题
// this.globalData.isok=true
this.globalData.token='ok'
var that =this
console.log(res.userInfo); //用户信息结果
wx.getStorage({
key: 'unionid',
success(res) {
that.globalData.unionid=res.data
}
})
this.globalData.userInfo = res.userInfo;
if (this.userInfoReadyCallback) { //当index.js获取到了globalData就不需要回调函数了,所以回调函数需要做做一个判断,如果app.js中有和这个回调函数,那么就对这个函数进行调用,并将请求到的结果传到index.js中
this.userInfoReadyCallback(res.userInfo);
}
}
})
}
else{
console.log("未授权");
wx.removeStorage({
key: 'unionid'
})
}
}
})
}
})wxml
index.js
// pages/index/index.js
const app = getApp()
Page({
data: {
token:''
},
onGotUserInfo: function (e) {
var that = this
if (this.data.token != 'ok' && app.globalData.token != 'ok') {
wx.getSetting({
success: (res) => { //箭头函数为了处理this的指向问题
if (res.authSetting["scope.userInfo"]) {
wx.login({
success: function (data) {
console.log('获取登录 Code:' + data.code)
var postData = {
code: data.code
};
wx.request({
url: 'https://m.renyiwenzhen.com/rymember.php?mod=xcxlogin&code=' + postData.code + '&nickname=' + e.detail.userInfo.nickName,
data: {},
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log(res.data);
that.data.token='ok';
wx.setStorage({
key: "unionid",
data: res.data.unionid
})
wx.navigateTo({
url: e.target.dataset.url
})
},
fail: function () {
console.log('1');
}
})
},
fail: function () {
console.log('登录获取Code失败!');
}
})
}
}
})
} else{
wx.navigateTo({
url: e.target.dataset.url
})
}
}
})
wx.request({
url: 'https://m.renyiwenzhen.com/xcx_ajax.php?action=babylist', //仅为示例,并非真实的接口地址
method: 'post',
data: {
unionid: uni
},
header: {
'content-type': 'application/x-www-form-urlencoded' // 默认值
},
success(res) {
// console.log(uni)
console.log(res.data)
that.setData({
list: res.data.bblist
})
}
})全局标题栏
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#3EC8C8",
"navigationBarTitleText": "乳孕呵护",
"navigationBarTextStyle": "white"
}
局部标题栏
{
"usingComponents": {},
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "附近医院"
}
全局底部栏
"tabBar": {
"color": "#e4e4e4",
"selectedColor": "#333",
"list": [
{
"pagePath": "pages/index/index",
"text": "发现",
"iconPath": "./images/find.png",
"selectedIconPath": "./images/finded.png"
},
{
"pagePath": "pages/his/his",
"text": "医院",
"iconPath": "./images/his.png",
"selectedIconPath": "./images/hised.png"
},
{
"pagePath": "pages/stu/stu",
"text": "经验",
"iconPath": "./images/stu.png",
"selectedIconPath": "./images/stued.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "./images/my.png",
"selectedIconPath": "./images/myed.png"
}
]
}
1、wxml
底部栏没有的路由 底部栏有的路由
2、js
go: function (e) {
wx.navigateTo({
url: '../eatxq/eatxq?id=' + e.currentTarget.dataset.id + "&name=" + e.currentTarget.dataset.name
})
}
加载中 页面
加载完成true
wx.request({
url: 'https://m.renyiwenzhen.com/xcx_ajax.php?action=caneatsearch',
method: 'post',
header: {
'content-type': 'application/x-www-form-urlencoded' // 默认值
},
data: {
search: options.search
},
success(res) {
that.setData({
list: res.data.fllist,
onff: true
})
}
})
利用正则修改收到的数据
wx.request({
url: 'https://m.renyiwenzhen.com/xcx_ajax.php?action=cjdetail',
method: 'post',
data: {
id: options.id
},
header: {
'content-type': 'application/x-www-form-urlencoded' // 默认值
},
success(res) {
that.setData({
msg: res.data.cjmag.cjxq.replace(/\/g, "
")
})
}
})
1、在根目录下的utils文件夹里创建一个名为filter.wxs文件 2、写入自己要定义的条件
var xb=function (v) {
var xingb=''
if(v==1){
xingb="男宝宝"
}
else{
xingb="女宝宝"
}
return xingb
}
module.exports = {
xb:xb
}
3、在页面中引入使用
{{filter.xb(isxb)}}
app.js
onLaunch: function () {
if (wx.canIUse('getUpdateManager')) {
const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function (res) {
// 请求完新版本信息的回调
if (res.hasUpdate) {
updateManager.onUpdateReady(function () {
wx.showModal({
title: '更新提示',
content: '新版本已经准备好,是否重启应用?',
success: function (res) {
// res: {errMsg: “showModal: ok”, cancel: false, confirm: true}
if (res.confirm) {
// 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate()
}
}
})
})
updateManager.onUpdateFailed(function () {
// 新的版本下载失败
wx.showModal({
title: '已经有新版本了哟~',
content: '新版本已经上线啦,请您删除当前小程序,重新搜索打开哟'
})
})
}
})
}
}
我们经常会遇到这种需求:
点击对应的的tab,这里比如说是A页。

跳转到对应项目的页面,这里比如说是B页。

A页:
goitem:function (e) { wx.navigateTo({ url: '/pages/item/item?url=' + e.target.dataset.url }) }, 详情 建档 产检 分娩
B页:
onLoad: function (options) { var that = this; console.log(options.url) if (options.url === 'cj') { that.setData({ currentTab: '0', btn: '产检', set: 'cj' }); } else if (options.url === 'jd') { that.setData({ currentTab: '1', btn: '建档', set: 'jd' }); } else { that.setData({ currentTab: '2', btn: '分娩', set: 'fm' }); } } 详情 产检 建档 分娩
总结
以上所述是小编给大家介绍的微信小程序实用代码段,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!