微信小程序初体验

最近微信小程序如火如荼,很多开发者也是跃跃欲试,当然我也不例外,本着对新事物的好奇,用一下午的时间研究了一下,此处装逼,应该有掌声,勿打脸!哈哈...

我做的是iOS开发,用了两天的时间看了HTML+CSS,文章中有说的不到位的地方请高手指教!勿喷!

<h4>首页</h4>
什么是微信小程序?微信小程序就是....(百度),各大平台上的专题介绍更为专业,这里我只是讲一下对于前端小白如何装逼!
.
<h4>安装微信web开发者工具</h4>
百度网盘:链接:https://pan.baidu.com/s/1i5hoewP 密码:7kgv
安装最新版0.9版本
破解方法:下载云盘文件
链接:https://pan.baidu.com/s/1hsCylNY 密码:qyv3
替换以下目录文件
/Resources/app.nw/app/dist/components/create/createstep.js
/Resources/app.nw/app/dist/stroes/projectStores.js
/Resources/app.nw/app/dist/weapp/appservice/asdebug.js
.
<h4>开始创建小程序</h4>
破解完成后打开微信web开发者工具,如下:

QQ20160924-0@2x.png

这里的appId 项目名称我都是随便写的,大家也可以随便填写,然后选择一个文件地址, 点击添加项目。

这一步完成之后我们会看到如图的界面:

QQ20160924-2@2x.png

<h4>目录分析</h4>
主要的文件是app.js(脚本文件) 、app.wxss(样式表文件)、app.json(配置文件),前两个不用说了,做过前端的都懂,配置文件我理解的是配置页面、窗口颜色、或者是导航栏的一些属性等。 .json代码如下:
<code>
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
</code>

以上代码可以看出,这个小程序默认为大家创建好了两个页面,一个是index 一个是logs

然后再看目录文件的index 和 logs文件夹下面,同样有各自的脚本文件、配置文件、样式表文件、还多了一个.wxml文件(相当于.html文件) 然后大家就可以在wxml文件中为每个页面写内容了,在wxss文件写一些样式了。。。。。

<h4>后记</h4>
我就随便写了几句代码看一下效果,


QQ20160924-1@2x.png

初学HTML望大家原谅,我是按照html的语法写的,有些代码不一样,也不知道怎么实现,以后还要多多学习!

不过我觉得微信web开发工具有两点我觉得不是很好:
1,每次编辑一个文件都需要保存一下才能看出效果,否则的话界面上不会改变
2,代码提示方面还是不够全面,标签对好像不能自动补全,不智能,差评。

以上有什么不对的地方希望大家指出!大神勿喷!菜鸟还在学习中!谢谢!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 说有点神奇的微信应用号出来了,就好奇跟风看看微信小程序到底是怎样的吧,网上教程暂时不是很多,不过微信官方的开发者文...
    黑曼巴先生阅读 4,745评论 0 0
  • 近日,微信推出的小程序横空出世,一下引起轩然大波,吃瓜群众纷纷围观。 在这个技术快速更新,牛人辈出的大环境下。作为...
    夕阳下的放牛郎阅读 487评论 0 2
  • 「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试。可是小程序目前还在内测,首批只发放了 ...
    EarlGrey阅读 7,742评论 19 97
  • 当前端在谈论微信小程序的时候,iOS 开发在谈论什么。 本职是iOS 移动开发的,最近研究了一下比较火的微...
    伊尔今夏阅读 11,501评论 2 20
  • 岁月包裹了悲伤,我在一步步地走向阳光的尽头。年华里的一池秋水,看上去已没有半点波澜。只要想着几十年后的一抔黄土和那...
    冀语阅读 298评论 4 3