微信小程序学习总结(五)常见问题实例小结


Posted in Javascript onJune 04, 2020

本文实例总结了微信小程序常见问题。分享给大家供大家参考,具体如下:

问题一

先来看我遇到的第一个问题
以下是我创建的目录

微信小程序学习总结(五)常见问题实例小结

当创建完这个json文件之后,报了下面一个错

微信小程序学习总结(五)常见问题实例小结

这个是我的报错信息。

解决方法:打开这个json文件,输入两个一对花括号完事。

问题二

以下是我引入js的代码,绝对路径报错。

var postsData = require('/data/post-data.js')

报错信息:

Uncaught Error: module “pages/post/data/post-data.js” is not defined

改正后的

var postsData = require('../../data/post-data.js')

数据

如果在onLoad方法中,如果是异步执行一个数据绑定,则需要使用this.setData方法。如果不是异步是同步的话,那么只需要对this.data赋值可实现数据绑定

格式化代码

shift + alt + F

数据缓存

需要说明的这个是数据的本地缓存,可以对本地缓存进行设置、获取和清理。同一个微信用户,同一个小程序 storage 上限为 10MB。

设置缓存

wx.setStorageSync('key','value');

获取缓存

wx.getStorageSync('key')

清除缓存

//清除所有缓存
wx.clearStorageSync();
//清除指定缓存
wx.clearStorageSync('key');

界面交互

显示消息提示框

wx.showToast({
 title: '成功',
 icon: 'success',
 duration: 2000 //设置弹框时间
})
//也可以这么写  三元运算的方式 根据需要来
wx.showToast({
 title:result?'确定收藏':'取消收藏',
 duration: 2000 
})

显示loading

wx.showLoading({
     title: '加载中',  //显示加载
    })

    setTimeout(function () {
     wx.hideLoading()  //取消加载
    }, 2000)

询问框

wx.showModal({
     title: 'hello',
     content: postCollected?'确认收藏吗':'确认取消收藏吗',
     success: function (res) {
      if (res.confirm) {
       //更新缓存
       wx.setStorageSync('post_collected', postsCollected);
       that.setData({
        collected: postCollected
       })
      } else if (res.cancel) {
       console.log('用户点击取消')
      }
     }
    })

微信小程序学习总结(五)常见问题实例小结

打印的res

微信小程序学习总结(五)常见问题实例小结

​显示操作菜单

onShareTap:function(event){
    wx.showActionSheet({
     itemList: [
      '分享给微信好友',
      '分享到朋友圈',
      '分享到QQ'
     ],
     itemColor:'#405f80',
     success:function(res){
      console.log(res)
     }
    })
   }

显示效果

微信小程序学习总结(五)常见问题实例小结

获取全局变量

app.js

app({
  globalData: {
  g_name: "huangyuxin"
 }
})

使用

detail.js

var app = getApp();

希望本文所述对大家微信小程序设计有所帮助。

Javascript 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
angularJS 中input示例分享
Feb 09 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
理解javascript中DOM事件
Dec 25 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 #Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 #Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 #Javascript
微信小程序实现watch监听
Jun 04 #Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 #Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 #Javascript
vue基础知识--axios合并请求和slot
Jun 04 #Javascript
You might like
使用php验证复选框有效性的示例
2013/11/13 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
vue小白入门教程
2018/04/02 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
Python实现翻转数组功能示例
2018/01/12 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
Python类装饰器实现方法详解
2018/12/21 Python
python使用正则筛选信用卡
2019/01/27 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
dpn网络的pytorch实现方式
2020/01/14 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
土木工程专业大学毕业生求职信
2013/10/13 职场文书
商务邀请函范文
2014/01/14 职场文书
环境工程专业自荐信
2014/03/03 职场文书
年度考核自我鉴定
2014/03/19 职场文书
行政内勤岗位职责
2014/04/07 职场文书
车辆工程专业求职信
2014/04/28 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
golang内置函数len的小技巧
2021/07/25 Golang
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫