武汉小程序开发必备技能清单,写给开发人员的小程序代码要点

作者:小站 来源:微信小程序 2019-09-07 17:51

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

写给开发人员的小程序代码要点

一、必备技能清单

1、微信标记语言 WeiXin Marked Language(WXML)

2、微信样式表 (WeiXin Style Sheet, WXSS)

3、JavaScript(JS)

二、针对iOS / Android开发人员

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

三、针对网页前端开发人员

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

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

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

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

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

四、针对后端开发

这事儿就复杂了,建议你关注详细研读一下

(1)、语言和文件

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

1、WXML

2、WXSS(Weixin Style Sheet, 微信样式表)

3、JS

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

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

2、WXSS与CSS可直接通用

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

(2)、语言和文件

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

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

中将其大小调整为整个屏幕,并设置 scroll-y(上下滚动)或

scroll-x(左右滚动)为 true。

<scroll-view scroll-y="true">

<view>Hello World</view>

</scroll-view>

五、绑定数据

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

条件渲染与列表渲染

<view wx:if="{{ boyname == 'Tom' }}">Hello,

<view wx:elif="{{ girlname == 'Anna' }}">Hello,

Anna!</view>

<view wx:else>You neither Tom nor Anna.</view>

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

Page({

data: {

boyname: 'Tom',

girlname: 'Anna'

}

})

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

<view wx:for="{{array}}">

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

</view>

Page({

data: {

array: [{

message: 'foo',

}, {

message: 'bar'

}]

}

})

六、模板与引用

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

<template name="grettings">

<view>

<text>Hello, {{name}}</text>

</view>

</template>

//some other codes

<template is="grettings" data="{{...name}}" />

如果需要整个页面引用,需要使用到 include。

<include src="header.wxml"/>

<view> body </view>

<include src="footer.wxml"/>

七、样式

通过WXSS样式表,开发者可以定义WXML中的元素样式,可直接用选择器选择元素。

八、用户操作和事件响应

微信使用的不是HTML,不能添加超廉价来检测用户的点击事件。需要监听点击事件的元素,应该在WXML中使用bindtap属性或catchtap属性进行绑定。

<view bindtap="tapName"> Click me! </view>

除了点击一次,微信也提供按住、开始触摸、松手等事件响应。

在WXML中绑定好一个事件之后,就能在主程序JS中使用。

Page({

tapName: function(someThingHere){

//执行这部分代码

}

})

当需要在小程序的页面间进行跳转时,应该使用

wx.navigateTo()方式。

tapName: function() {

wx.navigateTo({

url: '../logs/logs'

})

}

需要注意的是,有关于页面层级跳转,微信将层级跳转限制到了5层。在开发商需要注意是否超过了相应限制。


本文地址:微信小程序开发频道 http://www.dayku.cn/wxxcx/3186.html,武汉易企推建站公司提供一站式网站制作开发服务:武汉网站建设、网站开发、高端网站设计制作、手机网站开发,微信小程序开发等建站服务,制作周期短,价格实惠,效果满意;以及全网营销、网站优化服务、百科词条创建修改、新媒体引流、公司负面公关处理等


相关文章相关文章
  • 你的行业适合做小程序吗?不同的行业小程序适合什么样的功能?

    你的行业适合做小程序吗?不同的行业小程序适合什么样的功能?

    各行各业,形形色色。商家们想拥有一款自己行业的小程序,可由于不熟悉微信小程序,可能就用了不适合自己行业的小程序功能而错失用户。那么不同的行业小程序适合什么样的功能? 餐饮行业 适用于中餐馆、西餐馆、快餐店、烘焙店、火锅店、茶叶店、酒吧、酒楼、...

    2021-01-19 18:01
  • 微信小程序和app哪个更好?小程序会取代app开发吗?

    微信小程序和app哪个更好?小程序会取代app开发吗?

    程序,简单来说就是app的缩略版,不需要下载安装就可以在其他平台上直接运行。 目前我们接触最多的就是微信平台上的小程序,很多为客户提供需求的企业都开发了小程序功能,只需要搜索使用,就可以轻松的完成各种各种需要在网页或者app上完成的业务。 关于app...

    2021-01-15 20:21
  • 如何做微信小程序?制作小程序的费用详解!

    如何做微信小程序?制作小程序的费用详解!

    微信小程序越来越火爆。依托微信的大平台,小程序在推广运营上有诸多优势。很多实体商城会制作商城小程序。那么我们如何来打造一款属于自己的小程序呢?下面由弘毅小编为大家详细介绍制作小程序的流程及价格。 如何做微信小程序?制作小程序的费用详解! 在介...

    2021-01-13 19:52
  • 教育行业适合用小程序吗?具体该如何制作?

    教育行业适合用小程序吗?具体该如何制作?

    教育行业适合用小程序吗?具体该如何制作?除了课本知识外,兴趣班也成了不少家长的选择,让孩子学音乐、学美术,各种技能点加满。眼看着教育培训市场一路走高,直到去年年底,整个行业受到沉重打击,周边的培训机构一家接着一家关门停业,实体经济不堪重负...

    2021-01-07 14:15
  • 微信小程序能做到哪些功能?开发一款小程序企业要多少钱?

    微信小程序能做到哪些功能?开发一款小程序企业要多少钱?

    开发一款小程序企业需要花多少钱呢?微信小程序能做到哪些功能?找小程序外包公司并不难,网上一搜一大把,难的是如何从众多外包公司中,挑选一家性价比最高的,花钱最少、小程序质量过硬、后期服务用心的公司。 那开发一款小程序企业需要花多少钱呢? 小程...

    2021-01-05 16:27
  • 制作微信小程序大概多少钱?小程序具体价格明细一览表

    制作微信小程序大概多少钱?小程序具体价格明细一览表

    微信小程序目前越来越火,它比开发一个app的成本要低很多。很多企业会选择做一款小程序来扩展自己的业务,但是对小程序制作及价格却不是很了解。到网上去找,发现报价都是五花八门。那么我们如何来选择一家合适的报价方案呢?今天小编为大家详细介绍小程序制...

    2020-12-25 16:29
本地企业
              可提供上门服务

便捷

本地企业可提供上门服务

提供适合、专业可行方案

周到

提供适合、专业可行方案

5-10分钟售后响应机制<

贴心

5-10分钟售后响应机制

按效果收费,无效果不收费

放心

按效果收费,无效果不收费

行业高标准,效果稳定可靠

稳定

行业高标准,效果稳定可靠

1-3个月排名上百度首页

快速

1-3个月排名上百度首页

武汉易企推建站公司;公司地址:武汉市武昌区静安路6号5.5创意产业园4楼;公司官网:http://www.dayku.cn 手机站

服务热线:18120550335 / 027-88866235 欢迎来电咨询; 联系QQ:1193073039

Copyrigh@2017-2030 版权所有:武汉易企推网络科技有限公司 备案号:鄂ICP备17012199号 网站地图