首页小程序开发正文

小程序开发的坑有哪些（小程序开发难吗）

小程序开发 2023-01-30T14:59:09 1589

本篇文章给大家∩谈谈小程序开发的坑有哪些，以及小程序开发难吗对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。本文目录一览： 1、小◢程序开发有哪些坑 2、

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

本文目录一览：

小程序开发有哪些坑

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。

uni-app小程序开发踩坑记录

最近要从零开发一个跟后台管理系统对接的小程序，因为功能比↙较复杂，时间短，选择了比较火的uni-app，因ㄨ为小程序出现的时间较短，各方面并不完善，开发过程中就是不断踩坑的过程，特此记录一小下。

uni-app虽然功能还不完善▓，但是插件市场里东西还是不少的，在搭建框架中因为需求要求借鉴了之前开发的PC端，所以有一些跟之前开发VUE相关」的插件，可以提高开发效率，

插件：

坑：

1.覆盖原生▽组件，需要用cover-view容器，但是cover-view里可包含的标签有限，类似view等在真机调试时不显示，需全部替换成↘cover-view，且icon无法显示，可以用cover-imaga代替。

2.小程序和小程序之间的跳转（如腾讯云的人机滑动验证），跳转回来时需要进行操作，此时可以判断app.vue中的options，如果按小程序文档中来说当options.scene === 1038时是小程序跳回来的场景，但是部分手机跳回来是options.scene为1001，只能将这2种都作为跳转判断的条件。

3.小程序跳转回★来app中的onshow有时不执行，这个原因暂未找到

4.在uniapp的H5版本，接入腾讯云滑动验证，示例的点击滑动验证元素是通过dom操作的，但是无效，可能跟uniAPP不支持dom操作有关系，采用定◥制接入方法一，手动调用。

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

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({