微信小程序开发有哪些坑(开发微信小程序难不难)

小程序开发 2798
本篇文章给大家谈谈微信小程序开发有哪些坑,以及开发微信小程序难不难对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 微信小程序开发中遇到的坑及解决办法 taro单独为某个项目切换taro版本环境 单独为某一个项目升级#这样做的好处是全局的 Taro 版本还是 1.x 的,多个项目间的依赖不冲突,其余项目依然可以用旧版本开发。 如果你的项目里没有安装 Taro CLI,你需要先装一个:

本篇文章给大家谈谈微信小程序开发有哪些坑,以及开发微信小程序难不难对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

微信小程序开发中遇到的坑及解决办法

taro单独为某个项目切换taro版本环境

单独为某一个项目升级#这样做的好处是全局的 Taro 版本还是 1.x 的,多个项目间的依赖不冲突,其余项目依然可以用旧版本开发。 如果你的项目里没有安装 Taro CLI,你需要先装一个:

# 如果你使用 NPM

$ npm install --save-dev @tarojs/cli@2.x

# 如果你使用 Yarn

$ yarn add -D @tarojs/cli@2.x

echarts在小程序中滑动卡顿

由于微信小程序中,echarts的层级最高,无论设置多大层级也无法遮住echarts。而且小程序中好像只能用echarts吧。所以为了解决这个bug,我只能委屈求全了。打开ec-canvas.wxml文件,将touchStart、touchMove和touchEnd去掉了,直接删除就好啦。这三个事件应该是做缩放的吧,我们也没有这个缩放的需求。所以就去掉了。虽然暂时满足的需求,还是没有真正的解决问题。

原:

bindinit="init"

bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}"

bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}"

bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"

现:

bindinit="init"

echarts在小程序中无法跟随页面滑动

在卡顿问题中能与echarts交互少的,可以直接使用图片代替cannvas,即在echarts渲染完毕后将它替换为一张图片。

如果我更新了数据,那么就重新放出echarts,等它渲染完毕后,再次替换为一张图片。

chart.on('finished', () = {

getCurrentInstance().page.selectComponent(id).canvasToTempFilePath({

success: res = {

console.log('res.tempFilePath====',res.tempFilePath)

this.setState({

echartImgSrc: res.tempFilePath

      })

},

    fail: res =console.log('转换图片失败', res)

});

})

render:

this.state.echartImgSrc =='' ?

  ref={this.refChart}

id={this.state.id}

canvas-id="mychart-area"

  force-use-old-canvas="true"

  ec={this.state.ec}

/

:

CoverImage src={this.state.echartImgSrc}/CoverImage

开发微信小程序的“雷区”有哪些?

微信小程序的优势:无需下载,无需安装注册,即点即用,不主动推送广告。微信小程序的优势直抵app用户的心扉,这不就是用户想要的体验吗?因此微信小程序的用户体验是其必须要保证的底线,一切伤害用户体验的行为,是开发者都不能碰触的原则。

游戏类小程序“滥用分享”行为

在4月份,群聊被小程序分享搞的乱糟糟,群里有三个人分享小游戏就已经霸屏,看不到聊天信息了,用户体验一度被践踏。很快,微信官方将一下两种行为界定为违规,第一种,强制用户分享小游戏到群包括分享到不同群,就是小游戏结束时弹出分享小游戏到群/不同群,可获得第二次生命继续游戏。第二种,诱导用户分享到群,可获得免费道具,或得到双倍积分等利益。

如过开发是出现如此违规行为,会对小游戏的搜索能力、分享能力、广告及道具结算能力进行限制,情节严重这将面临下架处理。

因为“营销滥用”行为,关闭个人小程序“公关/推广/市场调查”和“广告/设计”类目。

微信小程序的注册门槛较低,无论是个人还是企业、商铺、政府、媒体,都可以申请。由于小程序是获取新流量的高效手段,导致营销行为泛滥,狠狠的伤害了用户体验。只对个人小程序滥用“商务服务”和“广告/设计”两大类目通过审核,来进行无节制营销行为的情况,微信方面表示,个人小程序将无法通过“商务服务-公关/推广/市场调查”和“广告/设计”的类目审核,也将不再对个人小程序开放。

“授权滥用”行为

在挺早前就有针对“授权滥用”行为的限制,当用户初次使用小程序是,强制要求用户授权昵称、头像、手机号、地理位置等信息,如果用户不同意,继续跳转授权页面,影响用户正常使用小程序。对腾讯自己的小程序“腾讯投票”也做了违规处理,就看出腾讯的决心。

现在微信已经对用户授权流程进行了优化,只有特定场景才需要用户授权指定信息。

小程序开发有哪些坑

1. JSON 配置文件小程序中,包含唯一的全局配置文件 app.json,以及每个页面的配置文件 page.json。每单页页面相应的 JSON 文件会覆盖与 app.json 相同的配置项。如下,是一个包含了所有配置选项的简单配置 app.json。"pages": [ //设置页面的路径"pages/index/index", //不需要写index.wxml,index.js,index,wxss,框架会自动寻找并整合"pages/logs/logs"],"window": { //设置默认窗口的表现形式

"navigationBarBackgroundColor": "#ffffff", //顶部导航栏背景色

"navigationBarTextStyle": "black", //顶部导航文字的颜色 black/white

"navigationBarTitleText": "微信接口功能演示", //顶部导航的显示文字

"backgroundColor": "#eeeeee", //窗口的背景色

"backgroundTextStyle": "light", //下拉背景字体、loading 图的样式,仅支持 dark/light

"enablePullDownRefresh": "false", //是否支持下拉刷新 ,不支持的话就直接不写!

"disableScroll": true, //  设置true不能上下滚动,true/false,注意!只能在 page.json 中有效,无法在 app.json 中设置该项。},"tabBar": { //底部tab或者顶部tab的表现,是个数组,最少配置2个,最多5个

"list": [{ //设置tab的属性,最少2个,最多5个

"pagePath": "pages/index/index", //点击底部 tab 跳转的路径

"text": "首页", //tab 按钮上的文字

"iconPath": "../img/a.png", //tab图片的路径

"selectedIconPath": "../img/a.png" //tab 在当前页,也就是选中状态的路径

}, {    "pagePath": "pages/logs/logs",    "text": "日志"

}],  "color": "red", //tab 的字体颜色

"selectedColor": "#673ab7", //当前页 tab 的颜色,也就是选中页的

"backgroundColor": "#2196f3", //tab 的背景色

"borderStyle": "white", //边框的颜色 black/white

"position": "bottom" //tab处于窗口的位置 top/bottom

},"networkTimeout": { //默认都是 60000 秒一分钟

"request": 10000, //请求网络超时时间 10000 秒

"downloadFile": 10000, //链接服务器超时时间 10000 秒

"uploadFile": "10000", //上传图片 10000 秒

"downloadFile": "10000" //下载图片超时时间 10000 秒

},"debug": true //项目上线后,建议关闭此项,或者不写此项

2. JS 逻辑层

小程序的逻辑层由 JavaScript 语言完成。但因为小程序不在浏览器中运行,所以 JS 在 web 浏览器中的一些函数不能用,如 document、window 等。

app.js 有全局的小程序生命周期,page.js 有自己本页面的生命周期。

2.1 注册小程序 app.js

这一步骤,有这几个需要注意的地方:

必须在 app.js 中,使用 app() 函数注册微信小程序。全局小程序中,只能注册一次;

不能在 app() 内的函数中调用 getApp()(小程序实例),使用 this 就可以拿到小程序的实例;

不要在 onLaunch 的时候 getCurrentPage(),因为此时 page 还没有生成;

通过其他子页面调用 getApp() 获取实例后,不要私自调用小程序全局的生命周期方法;

可以通过 var app=getApp() 获取小程序的实例。

app ( {  // 小程序生命周期的各个阶段

 onLaunch: function(){},//当小程序初始化完成时,会触发 onLaunch(全局只触发一次)

 onShow: function(){},//当小程序启动,或从后台进入前台显示,会触发 onShow

 onHide: function(){},//当小程序从前台进入后台隐藏,会触发 onHide

 onError: function(){},//当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息

 // 自定义函数或者属性,用 this可以访问

 ...

})

2.2 注册小程序的页面 page.js

Page() 用来注册一个页面,维护该页面的生命周期以及数据。

Page({  data: { //页面的初始数据//调用:{{text}} {{array[0].msg}}

   text: 'init data',    array: [{      msg: '1'

   }, {      msg: '2'

   }]

 },  // 页面生命周期的各个阶段

 onLoad: function () {}, //生命周期函数--监听页面加载

 onShow: function () {}, //生命周期函数--监听页面初次渲染完成

 onReady: function () {}, //生命周期函数--监听页面显示

 onHide: function () {}, //生命周期函数--监听页面隐藏

 onUnload: function () {}, //生命周期函数--监听页面卸载

 onPullDownRefresh: function () {}, //页面相关事件处理函数。如果需要监听用户下拉动作,需要 在app.json中配置  "enablePullDownRefresh":"true" 允许上拉刷新

 onReachBottom: function () {}, //页面上拉触底事件的处理函数

 onShareAppMessage: function () { //用户点击右上角分享

   return {      title: '自定义分享标题',      desc: '自定义分享描述',      path: '/page/user?id=123'

   }

 },  // 自定义函数或者属性如:

 customData: {    hi: 'MINA'

 }...

})

2.3 公共模块 util.js

公共模块方法需要通过 module.exports 对外暴露接口,使用的时候需要利用 require(path),将文件引入。如:

function sayHello(name) {//公共方法util类

 console.log(`Hello ${name} !`)

}module.exports.sayHello = sayHello//用module.exports 对外暴露接口

//先引入文件,是新建的一个 utils 包,公共方法在 util.js 里面var util = require('../../utils/util.js')

Page({//调用类

 onLoad: function () {//  使用时,用 util 引用名调用,如:util.sayHello()

   util.sayHello('我是传的值');

 }

})

2.4 数据操作

setData() 不能直接操作数据,例如 this.data.text="xxxxx" 就是错误的。你需要在 this.setData () 之中,进行数据的操作。

同时,这里有作用域的问题。比如,需要在局部函数中使用,就需要 .bind(this)。

如果你需要操作全局的数据,你需要在 app.js 中进行相应设置,例如:

App({// app.js

 globalData: 1})// 某 page.jsconsole.log(getApp().globalData)

3. 视图层 WXML

视图层的数据绑定均来自于 Page 中的 data,想要修改相应值,你需要用到 this.setData。数据绑定使用两对花括号,将变量名包起来。

3.1 条件渲染

你可以利用 if 和 else,在视图层上编写在特定情况下,出现的不同的视图结果。

view wx:if="{{zhenjiaa=='123'}}"123334/viewview wx:if="{{zhanjia}}"123334/viewview wx:if="{{len 5}}"大于5我就显示了 /viewview wx:if="{{length 5}}" 1 /viewview wx:elif="{{length 2}}" 2 /viewview wx:else 3 /viewblock wx:if="{{true}}"view view1 /viewview view2 /view/block

很多人会将 CSS 中的 display: hidden 属性,将其做一个比较。

微信小程序中的 wx:if 是惰性的。如果不符合渲染条件,它不会渲染相应部分;

使用 display: hidden 时,元素始终渲染,只是视图层上没有显示,用户看不见。

如果你的小程序有元素显示频繁切换的需求,建议你使用 display: hidden,能够为用户提供能顺畅的使用体验。

3.2 列表渲染

相当于让 WXML 处理一个循环。

在 WXML 中,你可以这样来建立一个 for 循环:

view wx:for="{{array}}" {{index}}:{{item}} /view

然后在相应的 JS 中,新建一个数组:

page.jsPage({  data: {

   array: [1, 2, 3, 4, 5]

 }

})

需要注意的是,如果列表中的项需要动态添加到列表中,并希望项目保持原有的特征和状态,那么你应该使用 wx:key。

wx:key 有两种形式:

字符串:wx:key="unique"

保留关键字:wx:key="*this"

3.3 运算

WXML 可以执行简单的运算任务。例如:

view {{a + b}} + {{c}} + d /view

也可以做到字符串拼接:

view{{"hello" + name}}/view

甚至,你可以使用 ... 在 WXML 中展开对象。

3.4 模板

name 定义组件模版的名称,引用模版的时候使用 is 属性指定模版的名字,is 可以进行简单的三目运算,需要传入模版需要的 data 数据。

因为模版拥有自己的作用域,所以只能使用 data 传入数据,而不接受双花括号的写法。

template name="msgItem"viewtext {{index}}: {{msg}} /texttext Time: {{time}} /text/view/template!-- 其他代码 --template is="msgItem" data="{{...item}}"/

3.5 公共模块的引用

WXML 提供 import 和 include 两种文件引用方式。

import 有作用域的概念,不能多重引用。

!-- B.wxml --import src="a.wxml"/!-- A.wxml --template name="A"

text A template /text/template

而 include 就可以多重引用了。

!--引用 header、其中 header.wxml 中也引用了 footer.wxml--include src="header.wxml"/view body /view!-- header.wxml --view header /viewinclude src="footer.wxml"/

3.6 事件

名称以 bind 开头的事件不阻止冒泡,名称以 catch 开头的事件冒泡是阻止的。如 bindTap 和 catchTab。

在 WXML 中,可以使用 dataset 定义 data 中的数据,会通过事件传递。它的事件以 data- 开头,多个单词以 - 链接,如 data-a-b。

需要注意的是,使用这种方式定义的变量不能有大写。它会自动转成驼峰命名,调取的时候去驼峰命名的名字。

4. WXSS

WXSS 的用法类似于 CSS,并在 CSS 的基础上,扩展了 rpx 尺寸单位和样式导入功能。

WXSS 可以使用内联样式,但这样会影响渲染速度。

每个页面自己的 page.wxss 样式表,会覆盖全局样式表 app.wxss。

微信小程序/微信公众号中文乱码的坑

微信小程序可以通过webview嵌入H5页面可以说是给开发者很大的福音,手头的项目中有几个页面是使用H5开发的嵌入到了webview中,在小程序开发者工具的模拟器中测试完全没问题,放到Android真机上测也没问题,但是在iOS上打开后中文显示全部乱码,无论是在小程序还是直接通过微信点开链接都是乱码。但是奇怪的是在iOS的Safari浏览器中却是正常。

经过再三确定过文件编码就是UTF8没错。而且在html的head中也加入了 meta charset="utf-8" 。最后无奈一点一点对比之前的项目的区别,发现之前的项目中的meta是通过http-equiv设置的浏览器编码。

设置后发现显示正常,看来微信-iOS版本中的浏览器内核不是最新的,存在兼容问题,遇到坑的朋友们要注意了。

微信小程序开发有哪些坑的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于开发微信小程序难不难、微信小程序开发有哪些坑的信息别忘了在本站进行查找喔。

扫码二维码