怎么开发微信小程序？写给开发人员的小程序代码要点

微信一出小程序，除了各大媒体的内容转发，微信自己就生产了许多开发干货，但这么多干货你有空消化吗？小宝贴心地帮你把要点都摘出来了，欢迎收藏转发！

必备技能清单

1、微信标记语言 WeiXin Marked Language（WXML）

2、微信样式表 （WeiXin Style Sheet, WXSS）

3、JavaScript（JS）

针对iOS / Android开发人员

无论是ios还是Android开发人员，开发小程序都需要学习JavaScirpt语言。对于ios来说可能还需要学习使用HTML（WXML）构建界面方式。

针对网页前端开发人员

小程序的界面不是一个页面，而是一个应用界面<，以前网页端常用的p>、等标签都不在了，网页前端开发人员需要适应 WXML 的逻辑和写法。

虽然WXSS文件“复刻”了CSS，但小程序使用了rpx【reponsive pixel】作为尺寸单位（保证不同分辨率设备的元素正常显示）。所以他们之间的长度单位换算比例是需要了解的。

动态单位与 px 换算的基本概念是：选择一个分辨率作为基准，在基准分辨率中，一个像素点显示有多长，在其他屏幕上会显示同样长度。

例如，dp 与 px 换算公式是：dp = px * (目标设备 dpi 分辨率 / 160)。

但微信小程序的 rpx 换算方式，会与其他动态单位的换算方法有些出入。微信官方提供的换算方式更「傻瓜」一些：rpx = px * (目标设备宽 px 值 / 750)。

针对后端开发

这事儿就复杂了，建议你关注【微信号zxcx0101】详细研读一下

语言和文件

小程序的文件类型大概分一下几种：

1、WXML

2、WXSS（Weixin Style Sheet, 微信样式表）

3、JS

它与前端三件套的异同点：

1、WXML更像是Android开发中的界面XML描述文件，更适合于程序界面的构建；而HTML倾向于文章的展示。

2、WXSS与CSS可直接通用

3、小程序的JS新增了微信的一些API借口，其他都差不多。

语言和文件

WXML最大的特点是以视图（view）方式串联界面元素，并通过陈旭逻辑将信息更新实时传递至视图层。View可以被多级嵌套，可以置放视觉元素。

可以使用 scroll-view 视图，在 WXSS

中将其大小调整为整个屏幕，并设置 scroll-y（上下滚动）或

scroll-x（左右滚动）为 true。

Hello World

绑定数据

对于单个字段，开发者可以使用数据绑定的方法更新信息。还可以在JS主程序中以函数形式更新，同样可以反映到界面上被绑定的数据中。

条件渲染与列表渲染

Hello,

Hello,

Anna!

You neither Tom nor Anna.

两个花括号所包含的判断条件中的变量于主程序JS代码中的data中声明。

Page({

data: {

boyname: 'Tom',

girlname: 'Anna'

}

})

若需要建一个列表，可使用WXML中的循环渲染将同一元素渲染代码进行稽核，把数据通过组数的方式写入data中供WXML访问

{{index}}: {{item.message}}

Page({

data: {

array: [{

message: 'foo',

}, {

message: 'bar'

}]

}

})

模板与引用

WXML支持使用模板与引用减少代码体积。可以讲多个模板写入同一文件，并使用import在其他文件中进行引用

//some other codes

小二CMS介绍

我们立足合肥，业务覆盖安徽、全国及全球市场。我们凭借一支经验丰富、富有创意、协作无间的专业技术团队，专注于将前沿技术通过高效简捷的途径呈现给客户，量身打造优质解决方案。我们致力于通过持续努力，成为客户在信息化领域值得托付、共创价值的长期战略合作伙伴，协助客户在新经济时代敏锐捕捉商机，拓展发展空间，构筑强大竞争力。小二CMS专注企业数字化转型的智能建站与营销系统，提供从官网搭建、品牌推广到运营增长的一站式服务，助力中小企业低门槛拥有专业级互联网阵地。

网站建设 移动相关开发 营销推广与优化 域名主机邮箱 产品与技术 企业服务

了解全部业务

扫码咨询 · 关注微信