开发小程序潜规则（小程序开发坑）

IT服务网

作者

华为云服务器特价优惠火热进行中！

2核2G2兆仅需 38 元；4核4G3兆仅需 79 元。购买时间越长越优惠！更多配置及优惠价格请咨询客服。

合作流程：
1、点击链接注册/关联华为云账号：点击跳转
2、添加客服微信号：cloud7591，确定产品方案、价格方案、服务支持方案等；
3、客服协助购买，并拉微信技术服务群，享受一对一免费技术支持服务；
★技术专家在金蝶、华为、腾讯原厂有多年工作经验，并已从事云计算服务8年，可对域名、备案、网站搭建、系统部署、AI人工智能、云资源规划等上云常见问题提供更专业靠谱的服务，对相应产品提供更优惠的报价和方案，欢迎咨询。

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

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

小程序开发的注意事项都有哪些？

小程序的开发注意事项，如下：

1、为小程序开发的产品定位

有的用户开发小程序的目的只是为了服务于广大消费者，但是有的商家却是为了从中获取收益，不同的目的自然产品的定位也不同，大家需要根据自己的产品和行业找准自己产品的定位，找准了定位开发起来也能事半功倍。

2、做好线下推广

小程序需要线下的推广，只有通过线下的推广才能够让大家知晓这个小程序的存在，大家可以为小程序定位，基于地理位置让附近的用户看到，通过“附近小程序”的功能让大家能够搜索到，也可以使用比较传统的方法美也就是发传单和举办一些活动的方式，让大家可以通过扫描二维码进入，并且成为你的小程序粉丝。

3、寻找第三方开发公司合作

虽然小程序开发的费用没有APP费用高，它的构建系统也没有APP复杂，但是一般情况下公司和商户都还不具备小程序开发的能力，所以大家就需要寻找专业的第三方开发公司合作，通过他们专业的技能来为自己打造一个专属的小程序，并且找第三方开发公司合作比自己组建开发团队的费用更低。

4、开发过程中注重用户体验

大家可能在使用一款小程序的时候会发现，现在小程序暂时还没有信息发送的功能，但是却已经有了客服等交互功能，如果大家想要打造一个更好的小程序，在开发的过程中就一定要注重用户的体验度，让用户在使用小程序的过程中真正感受到小程序区别于原生App的方便快捷。

5、从公众号积累的影响力入手

大多数企业在开发小程序之前的都有了自己的公众号，我们可以利用公众号进行运营来推广小程序，再用小程序获取用户进入到订阅号展开二次转化，这样一来为企业的公众号积累了粉丝，二来也为大家所开发的小程序实现了变现的目的，同时做好小程序的服务还能够确保源源不断的流量，获得更多的用户。

开发小程序潜规则（小程序开发坑）

小程序开发有哪些骗局呢？

微信开发代理小程序的骗局

1、官方授权

顶着“官方授权”的帽子，其实就是打着腾讯、微信官方名义，称其是第三方服务商，收取注册费、代开发费用。

注：注册小程序根本不需要花钱！腾讯不会以任何“官方授权”、“独家代理”、“官方代理”等形式，授权第三方作为小程序开发指定机构！

2、抢注小程序名称

骗子常仗着商家对小程序了解不多，造谣小程序账号要抢注并有升值空间，还以限时优惠方式骗取注册费，并提供专项资金扶持和减免政策。

识别：微信小程序的注册无需任何费用，只有在认证的时候会收取300元认证费，只需300大洋！

另外，即使抢注到了别人已经占用的小程序名称，其拥有者也可以通过申诉夺回，所以，不要相信花钱可以抢名称的由头。

3、技术套路

有一些具备开发能力的个人很可能会以低门槛的由头吸引商家做小程序。

交了钱拿到小程序之后却发现只是个空壳，虽然界面上显示什么功能都有，点击之后却没有反应，想要继续优化功能，必须再次交钱才能获取。

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。

小程序开发有哪些限制条件

对于个人开发微信小程序却有着很多的局限性，很多功能个人的微信小程序就无法使用。【点击查看小程序开发底价】

如微信支付接口

小程序对接微信支付，需要额外开通“微信支付商户”的账户而开通微信账户也许要企业资格。同时，小程序本身也需要通过认证，才能开通微信支付接口，而个人主体的小程序是无法进行微信认证的，所以也就无法开通微信支付接口了。

想要了解更多有关小程序开发的相关信息，推荐咨询猪八戒网。猪八戒网成立于2006年，是中国领先的企业服务平台，服务交易独角兽企业。猪八戒网现有注册用户2800万、在全国布局线下数字化创业园区超过100个。十余年来，累计有10万余个人通过平台孵化成长为公司，超过100万人通过平台实现灵活就业，千万企业通过平台解决专业服务需求；专业性值得选择。

小程序开发注意事项

1. 开发小程序时，每个页面一定要在app.json文件中注册，页面文件夹和其包含的四个文件的名字要保持一致。

2. 小程序发起的都是HTTPS网络请求，在开发调试的过程中可以不校验协议和TLS版本，但在实际上线后必须进行HTTPS协议通信。

3. 小程序可以进行组件化开发以及数据绑定，所有对于DOM的操作都是基于数据驱动的，并没有直接进行DOM操作的做法，换言之，小程序内没有document对象，原生js和jQuery里的DOM操作思维要舍弃掉。

4. 小程序的网络请求wx.request()是不自带Cookies的，这和浏览器上的网络请求不同，因此基于Cookies实现的会话管理不适用于小程序。

5. 小程序的脚本文件中，内置对象是page，而非传统浏览器里的window，因此所有基于window对象来写的库(例如jQuery)都不适用于小程序。

6. 小程序提供模板功能，模板拥有自己的作用域，它只能使用从data属性传入的数据。

7. 每一个页面文件夹下的.json文件是用来写配置项的，如果该页面无需添加相关配置，.json文件也要写上一对大括号（“{ }”），否则会报错。

8. 在同一个tab里的页面可以跳转，并且允许携带参数。不同tab的页面之间无法跳转，使用wx.navigateTo()接口会报错。同时，tab之间的跳转可以用wx.switchTab()实现，但是路径后不能带参数。

9. 脚本文件里data的数据，在更新的时候要通过this.setData()方法来更新，而不能直接用“=”来做。

10. 在组件标签里，可以通过“data-属性值”的方式绑定我们需要的数据，然后在事件内置event对象里进行获取。

11. 小程序里也存在事件的冒泡，具体的冒泡事件可以参考官方文档，如果希望事件向上冒泡，则使用bind来绑定事件，若希望阻止事件冒泡，就使用catch来进行事件绑定。

12. 小程序支持文件引用，有import和include两种方式，import有作用域，也就是引入的目标文件里import的模板不会被引入；而include等于是将目标文件除以外的整个代码进行引入。

13. wx.login()和wx.getUserInfo()是两个独立的接口，前者可以实现用户登录，这个过程是悄无声息的，不需要用户授权，登录后可以拿到用户的openid和session_key；而wx.getUserInfo()可以拿到用户的具体信息，这个过程需要获得用户的授权，开发时也必须考虑用户拒绝授权的场景。

14. 目前小程序可以分享给微信好友和微信群，但小程序默认是没有这个功能的，只有在Page里定义了onShareAppMessage事件处理函数，点击小程序右上角才可以看到分享按钮。