Jester的博客

需求 获取出发点和目的地的距离、步行时间及路线规划原理采用微信小程序的map组件进行路线展示 腾讯地图的 微信小程序SDK 获取规划路线的坐标点wxml<view class="container"> <map longitude="{{longitude}}" latitude="{{latitude}}" polyline='{{polyl...

小程序中有一个横向导航菜单，点击不同选项去加载不同的自定义组件，有些菜单选项所对应的组件是相同的，这时候发现点击这些选项进行切换的时候数据并没有发生变化。原因：因为组件在上一次已经加载完成了，而组件中数据初始化操作（initData方法）是放在ready中的，所以并不会触发初始化解决：小程序官方文档中，生成的组件实例包含一些属性和方法，可以用selectComponent方法选中组件实例...

小程序需求：可以像微信群聊一样@某个人或多个人功能：输入框输入@符号（index.wxml），跳转至可以@人的页面（select.wxml）实现思路：1、监听input的输入，判断是否有@符号输入2、拿到选中人的名称3、设置input的光标位置代码：index.wxml<input placeholder='请输入文字' placeholder-class=...

小程序涉及到了用户上传头像的功能，用户可以手动选择裁剪区域。（1）上传头像页面选择图片，将得到的src地址传递到图片裁剪页面wx.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'], success: function(res) { ...

突然碰到的问题：小程序中view和text组件并不能让文本自动换行web页面经常是遇到不让文本换行，所以不能换行立刻想到强制换行word-break和word-wrap。只要在wxss给view和text加上word-break:break-all就可以实现自动换行了...

做的小程序中突然加了一个相册，要求相册可以点击实现翻页，web能实现这种翻页效果的插件有很多，如turn.js，类似这种插件基本都是基于jQuery的，但是小程序是不支持jQ的。参考了网上大佬的代码，实现了一个最简单的翻页效果基本结构：<view class='container'> <view class='page_first'>家谱相册，点击图片翻页...

一个商城类的小程序，点击不同分类进入列表页面，但是每个列表的导航标题根据分类不同而改变。小程序提供了和导航栏相关的API（https://developers.weixin.qq.com/miniprogram/dev/api/ui/navigation-bar/wx.setNavigationBarTitle.html）Page({ data:{}, on...

之前做了无限嵌套的树形结构的功能，其实就是自定义组件嵌套的原理，现在新增需求：点击树图的某项，显示一个祖先组件中已经隐藏了的选项结构。一开始想到了组件之间的传值，做了之后发现问题来了，点击第一层级的组件也就是子组件是没问题的，点孙子组件及其子代发现没有任何效果，通过打印发现根本就没有触发祖先组件中绑定的事件。原来小程序是不支持跨组件传值的，只能一层一层的传，子组件传递给父组件。比如A是引用嵌套...

对于小程序中的每个页面，都需要在页面对应的js文件中调用Page方法注册页面示例，指定页面的初始数据、生命周期回调、事件处理函数等。详细请看官方：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html其中页面事件中有onTabItemTap事件，表示点击tab时触发此事件，但是必须保证当前页是ta...

小程序可以在页面的json文件中去配置导航栏相关的内容，如导航栏的标题等，但是这些内容是固定的。有时候我们需要其他的一些东西，比如下图，此时需要我们去自定义导航栏1. 在页面的json文件中添加属性navigationStyle为custom{ "navigationStyle": "custom"}2. 获取导航栏相关的值因为不同手机顶部部的系统状态栏的高度可能不...

很多列表信息都会存在左滑出现删除等操作，就像QQ里的一样实现方式：通过小程序中的触摸事件来改变对应列表的样式wxml<view class='team-list'> <block wx:for='{{memberList}}' wx:key=''> <view class='team-item {{item.isMo...

Promise是异步编程的一种解决方案，比传统的解决方案--回调函数和事件--更强大。而且通过ES6的Promise对象，可以将嵌套的异步操作，改为线性的展现形式，在逻辑上更为清晰。小程序的框架，如wepy框架，可以安装配置Promise，可以将所有的异步API Promise化，也就是说所有的异步API都可以使用Promise写法；而原生小程序内部已经引入了Promise，在开发工具中...

用户一开始进入到小程序的首页，在首页列表中通过navigateTo跳转新页面进行一些操作，然后通过switchTab返回首页。发现跳转首页后数据并没有发生变化，在调试里面可以看到通过switchTab跳转到首页之后，页面并没有执行onLoad操作，所以数据和未授权之前相比是一样的。解决：（1）通过getCurrentPages（）获取页面栈来进行操作wx.switchTab({ ...

已经上线了的小程序，现在有新的版本上传，发现手机已经使用了该小程序的没有及时更新。看了一下官方的文档，发现有管理小程序更新的API。小程序启动会有两种情况，一种是【冷启动】，一种是【热启动】。假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程...

实现原理：利用自定义组件递归使用，也就是自定义组件自引用因为树状图的数据是从后台获取的，没有办法知道具体层级，但是他们的结构都是相同的，所以在自定义的组件中再去引用自身来实现需求1.先写好树形菜单的样式结构，可以自定义假数据，将静态写好2.自定义components，将写好的样式结构丢进去，子元素重复的结构就不需要了3.父组件传递数据，自定义组件进行操作可以去官网看看组件使用：...

小程序有一个需求：实现树形菜单，因为数据是动态的，所以页面没办法写死，想到了无限嵌套组件的嵌套其实就是让自定义组件引用自身，然后页面直接使用该组件就可以自定义组件的使用：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 1.自定义组件（树形菜单）&lt;view style...

1. 在微信小程序开发过程中，A页面跳转到B页面，并且把A页面的数据传递到B页面中使用（1）使用本地缓存// A页面中通过setStorageSync在本地缓存数据wx.setStorageSync('key','value')// B页面中通过getStorageSync读取键值来获取wx.getStorageSync('key')（2）通过页面路由  在使用url进行...

实现：点击视频获取该视频 id ，通过 wx.createVideoContext 创建video上下文videoContext对象。当前没有视频播放时，获取当前视频，play()方法进行播放；有视频播放时，pause()暂停正在播放的视频，play()播放点击的视频。因为安卓机出现视频黑屏的问题，所以使用cover-view给视频加了一个播放按钮，视频封面通过后台给的图片给到poster显示...

小程序实现分页加载和下拉刷新很简单，因为它在Page中有相关的处理函数onPullDownRefresh -- 监听用户下拉动作，实现下拉刷新onReachBottom -- 页面上拉触底，实现分页加载切记：想实现下拉刷新，必须在页面配置文件中（.json）添加 enablePullDownRefresh：true 开启下拉刷新Page({ data:{ ...

小程序实现预览图片：官方提供api接口 -- wx.previewImage官方地址：https://developers.weixin.qq.com/miniprogram/dev/api/wx.previewImage.html&lt;!-- wxml --&gt;&lt;view class='itme-img-view' data-id='{{item.id}}' bindta...

小程序提供选择图片的接口 wx.chooseImage，既可以从相册中选择，也可以进行拍照，但是对于上传图片的接口wx.uploadFile，每次只能上传单个文件。所以在上传图片时单张和多张就有点区别。1.上传单张图片data:{ imgsrc:'' //将图片展示页面},addImg:function(){ let that=this; let img...

微信小程序获取当前的地理位置：1、获取当前地理位置，首先要拿到用户的授权wx.openSetting2、微信提供的wx.getLocation接口，获取用户位置3、微信提供的接口返回数据是经纬度等参数，使用腾讯地图进行地理转换&lt;view class='obtain' bindtap='obtainPosition'&gt;获取当前位置&lt;/view&gt;首先在页面...

小程序提供了分享的功能，可以分享整个小程序，也可以自定义分享的内容onShareAppMessage在Page中定义了onShareAppMessage函数，可以设置该页面的分享信息只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮 用户点击分享按钮的时候会调用 如果需要点击页面其他位置实现分享，需要使用button组件（设置open-type为share） 此事件需要 r...

项目中有很多地方需要解析后台填写的富文本内容，小程序提供了富文本解析的组件 rich-text ，但是有很多限制。（https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html）所以找到了wxParse插件解析html使用方法：1.在github下载   （https://github.com/i...

实现思路：1.找到对应文章的id2.前端利用缓存wx.setStorageSync或者在页面js中this.setData()保存列表中点赞的id3.点赞和取消点赞对应点赞数改变4.后台的数据要同步变化  data:{ newsList:[], //列表数据 iszan:[] //点过赞的id集合 }, //页面加载初始化列表数...