首页小程序开发正文

微信小程序开发有哪些坑（微信小程序开发好做吗）

小程序开发 2023-02-18T02:32:07 3474

今天给各位分享微信小程序开发有哪些坑的知识，其中也会对微信小程序开发好做吗进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！本文目录一览： 1、微信小程序开发中遇到的坑及解决办法

今天给各位分享微信小程序开发有哪些坑的知识，其中也会对微信小程序开发好做吗进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

1、微信小程序开发中遇到的坑及解决办法
2、小程序开发有哪些坑
3、小程序有哪些缺点或弊端？
4、小程序开发经验总结
5、开发微信小程序的“雷区”有哪些？
6、微信小程序蓝牙入坑总结

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

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

小程序开发有哪些坑

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。

小程序有哪些缺点或弊端？

相信大家对于小程序都并不陌生吧，它不仅使用方便，而且无需下载，只需上滑微信即可轻松使用，深受用户的喜爱!企业商家们也正是看中了这一点，都开始了小程序商城的搭建：

小程序商城可以说是目前一个十分有效的营销手段了，但它并不是百利的，它同样也有着一些缺点弊端，那么小程序商城缺点弊端都有哪些呢?下面小编就来为大家列举一二：

1、小程序不支持收藏。如果是安卓用户，可以添加到手机桌面。当然也可以将小程序表问星标，这样小程序就能出现在列表顶部。

2、小程序所占的空间非常小但是同样的，小程序它的体积只有 2 MB(相当于一张照片的大小)，弊端：不能开发过于复杂的系统。首次打开会消耗一定的流量，打开需要时间。缓存后再次打开速度快，节省流量。

3、有的小程序为和APP一样很多小程序是需要用户授权才能提供完整的服务。小程序里提取到的用户信息也仅限于头像、昵称、openID，其他资料需要用户主动填写。

4、不能跳转外链网址，限制了小程序的开放性。

5、小程序不能直接分享到朋友圈，可通过二维码分享朋友圈。

6、小程序需要微信审核上架，微信对于小程序的内容、上线、审核、发布规则拥有解释权，因相关规则的更改，小程序内容、功能需要逐步修改。

7、小程序商城仅允许微信商户收款，收取一定的手续费，如果你借用平台收取费用，那么手续费也是一笔不菲的支出。

8、小程序的技术层面弱于APP或者HTML5，未能取代其位置。

当然，小程序的缺点弊端是有很多，但我们依然无法否认其强大的变现转化能力，所以说目前搭建一个小程序商城依然是拓展线上营销渠道的有利方式之一!

小程序开发经验总结

最近一直在做小程序，工作中也遇到了一些问题，踩了一些坑，所以想着写篇文章记录下来，并借此将小程序开发的相关知识进行梳理，方便以后参考，也为刚刚接触小程序的人提供一些思路方法，互相学习，共同进步。

1、微信小程序的目录结构及配置说明

app.json是小程序的全局配置文件，所有配置项key必须使用双引号括起来，value值为字符串类型的也必须使用双引号，不支持单引号。

1.1 pages

pages选项是必须配置的。该配置项注册了小程序所有页面的地址，其中每一项都是页面的路径+文件名。每一个页面都是由.json、.js、.wxml、.wxss四个文件组成，并且四个文件的名字必须要一致。

1.2 tabBar

tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab

1.3 usingComponents

使用自定义组件或者插件提供的组件前，必须先在这里声明

2、开发微信小程序遇到的问题及解决办法

2.1 双向绑定

微信小程序不支持通过v-model的方式实现自动双向绑定，需要给表单元素通过绑定事件，并使用this.setData来赋值实现。

2.2 computed和watch

微信小程序默认是不支持computed和watch的，如需要使用这两项功能，需要安装miniprogram-computed ，安装方法见官方文档

2.3 对象赋值

如果给对象的属性赋值，可以使用this.setData({'obj.key':value})来赋值，但是如果给某个属性名是变量的属性赋值，通过这种方法是会报错的，经过多次尝试，发现使用如下的方式赋值成功。

let newObj = `obj.${key}`

this.setData({

[newObj]: value

})

2.4 scroll-view

当页面存在弹框容器，并且弹框里的内容是需要滚动条滚动展示时，如果弹框下面那层的容器使用view元素的话，会导致滚动弹框内容时，同时会触发弹框下面那层的页面容器也会一起滚动，解决此问题可以将弹框下面的容器使用scroll-view元素替代view元素

3、小程序测试和发布

由于服务器域名request合法域名每个月只能修改5次，因此在本地开发小程序时，需要在微信调试工具中设置不校验合法域名。等小程序上线前再一次性将所有域名添加到小程序管理后台。

以上便是此次小程序开发中积累的一些经验，希望能给刚刚接触小程序的人提供一些思路方法，在以后的开发中，如果遇到新的问题，继续更新文档......

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

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

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

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

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

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

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

“授权滥用”行为

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

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