微信小程序开发 从入门到放弃(一)

微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个寒冬,身为一个Android开发者我是不相信的,他只不过提供了一个新的流量入口,给一些企业多了一种选择,即使有,那也是很遥远的未来。
不管微信小程序是否能颠覆当今的开发格局,我们都要以好奇的心态去接收,去学习。不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具。

如何创建小程序

很简单,首先下载微信开发者工具,下载稳定版本的就好。 下载 然后,创建小程序,可以参考下述图片:

微信小程序开发

微信小程序开发 从入门到放弃(一)

注意正式的小程序需要审批,拿到正式的APPID,我们测试的或者暂时没有的可点那个测试的appid,小程序模板选择默认就好。按照这样的流程走完,我们就创建完一个小程序了。

webstrom支持小程序开发

创建完小程序之后,我们先不着急开发。工欲善其事必先利其器,微信开发者工具有点卡,而且功能少,开发效率很低。所以我们还是改造自己的编译器,这里只介绍2种方法。一是 hbuilderX,他有支持小程序的模块,很小巧的一款编译器; 二是 webstorm,我用的他,在这介绍一下配置的方法,其他的大家自行google吧。

1、支持wxml和wxss的文件类型,有语法高亮。 打开webstorm编译器,依次点击 文件 — 设置 — 编辑器 — 文件类型 , 找到 html文件,添加 *.wxml; 找到Cascading style Sheet ,添加 *.wxss。就OK了

2、支持小程序代码提醒。 下载 这个文件,然后,把他放到一个显眼的地方; 然后, webstorm 点击 文件 — 导入设置 ,找到这个下载的文件,点击确定即可。

以上就是webstorm支持小程序语法的操作。

基础文件目录详解

小程序开发

project.config.json: 小程序的配置文件,包含项目打包配置、上传代码自动压缩等等,是一些开发、打包之类的配置。

app.json: 当前项目的配置文件。包括项目的页面引入、导航条颜色、导航条标题 等等,是项目具体到代码开发上的配置。介绍几个配置:

pages: 包含的页面。每次新增页面都得在这里引入,否则新页面的json配置等无法生效。 注意pages中页面先写的先渲染,所以数组第一条也就是我们的首页。

window: 配置所有页面导航条字体、颜色、背景色等

app.js: 小程序入口文件。生成小程序实例,App({}), 通常在这获取用户信息、授权信息、定义全局变量等。

app.wxss: 小程序全局 style 文件。对整个项目页面生效。通常规定项目的 字体、基础颜色,定义一些公共样式。

utils: 工具函数目录。通常用来放一些公共的js方法。比如封装的request请求,一些别的处理数据什么的方法。

pages: 小程序的页面目录。所有的小程序页面,都写在这里面。

完善项目目录

小程序开发

components: 我们封装的小程序可复用组件。

constants: 一些项目中的常亮。

image: 用到的图片。

services: 用到的所有接口目录

大致就新建了这几个,如果有别的需求,根据自己的情况增加。

基础语法详解

现在大致解释一下小程序的语法。首先, 创建新页面,默认都创建 *.wxml *.wxss *.js *.json 和我们平时写的代码差不多,都是html js css,多了个json配置文件

*.json:常用的属性有2大块,navigationBarTitleText 相关的设置顶部标题的, usingComponents 引用的组件

*.js: getApp() 获取小程序实例,拿全局变量等; Page({}) 创建页面; data 当前页面的变量;onLoad 生命周期,页面加载完毕。

*.wxml:注意,小程序支持的标签很少,像 span 是支持的,div不支持,一般用view代替块级,span、text 代替行级。

*.wxss:大部分css选择器不支持,支持的好像才5个,想支持less等得自己配置

小程序开发


<来客推(www.laiketui.com)是国内知名商城系统及商城网站建设提供商,为企业级商家提供零售商城、B2B2C多用户商城系统、社区团购商城系统、微信分销系统、小程序商城、微分销系统等多端商城网站建设解决方案>

申明:本网站部分文章和图片来源网络编辑,如有侵权及时沟通删除,来客电商原创文章,转载请注明来源。

相关新闻

QR code