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


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 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
使用Electron构建React+Webpack桌面应用的方法
Dec 15 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 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
zend framework多模块多布局配置
2011/02/26 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
使用PHP开发留言板功能
2019/11/19 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
Django Admin实现上传图片校验功能
2016/03/06 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
python中logging库的使用总结
2017/10/18 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
关于numpy数组轴的使用详解
2019/12/05 Python
Python的in,is和id函数代码实例
2020/04/18 Python
Python如何对齐字符串
2020/07/30 Python
python解包概念及实例
2021/02/17 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
公路绿化方案
2014/05/12 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
雷锋观后感
2015/06/10 职场文书
创业计划书之书店
2019/09/10 职场文书
六年级情感作文之500字
2019/10/23 职场文书
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js