技术控

    今日:46| 主题:49157
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] 前端外行的微信小程序瞎折腾之旅

[复制链接]
迷恋你的眼 发表于 2016-9-30 22:42:12
345 16

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
惭愧,最近下班回家沉迷山口山了,前一阵子搞antlr语法转换,这一阵子搞微信小程序,一直拖着没写点啥,一步一步来吧,肯定都得总结点东西留给自己看的。
  新技术尝鲜

  我一直是一个iOS客户端开发,前端经验只停留在w3cschool上面很基础的最初版本html,css,js学习,纯helloworld水准,就学了不到10分钟。所以这里也算是给客户端开发们打点气,新的东西阻碍的永远是你上手的动力,而不是这个东西的难易。顺带强调自己是前端外行,也是希望各位看官关于内容里如果有很多关于前端理解的偏差,帮我指正和修改。
  加了一些小程序开发群,发现很多常问的问题是:
  
       
  • 我想上手小程序,需要先学啥语言,先学习html css js吗?   
  • 小程序是用js开发吗?那我是不是要去先学js?   
  • 想上手学小程序,需要什么知识储备吗?  
  我的看法是,我反正从来都不是这样学任何一个新东西的,我就一句话
  
       
  • 直接开干啊!遇到啥问题再具体查啥问题。  
  这也跟个人接触新东西的习惯有关,反正我是完全不喜欢那种打算学个新东西(注意是’新’东西),然后就问一下有啥经典书籍么?先抱着一本16开,三四厘米厚的一本大厚书,(我习惯叫砖书,很厚很大砸人很疼),看个好几天一个礼拜的,然后还没上手。或者听到个新东西技术是html,然后美名其曰技术储备,俩仨礼拜略微看明白点html,css,但也毫无实战经验,俩仨礼拜,连小程序的边都没摸到。
  对于’新’东西,等系统化的出书,黄花菜都凉了啊,以前捣鼓RN的时候,无数人问RN有什么好书看,现在RN书停留的版本都是0.2X之前,并且一个个都很浅,现在0.3X已经天翻地覆了,这种啥都等系统化整理文章,做好技术储备,再开始动手,完全不是我的个人学习风格。
  直接上手是最快的,虽然资料少,但是有源码下,源码是最好的指导方案,没源码,官方文档,Github交流,网上及时阅读最新的碎片化博客文章,这些绝对是最快的学习和了解’新’东西的手段。
  光读光看是绝对没用的,最有效最有效的手段是,直接上手,上项目,哪怕是仿写一些开放API接口的app(知乎日报,豆瓣电影,有太多开放提供服务器api,让广大客户端开发者练手的)
  以上只是我的个人学习习惯,因人而异

  扯淡吐槽

  
       
  • xx火了,客户端要完蛋,前端要火   
  • 小程序会不会灭掉客户端开发   
  • 明年培训机构大量前端要涌入了   
  • 小程序也不一定就会火,客户端不可代替  
   当初RN出来就是这样一波风气,小程序出来也是,我对任何这种话题是毫无兴趣!这种 然并卵 的话题,键盘侠们热火朝天讨论几个小时,时间就过去了,然后就可以happy下班了,有这功夫demo都写出来了,项目都上线了
  开发环境

   上面其实也扯了太多的废话,微信小程序其实有自己的IDE开发环境,一切都在这个开发环境里面, 下载官方IDE开发包 ,开始运行,就可以直接开发预览小程序了。
   但这里有个IDE开发包破解的问题,小程序目前需要是需要邀请码的,有邀请码你就会有属于你业务的微信小程序appId,有邀请码的好处是你可以把小程序部署到真机上,没有邀请码, 无论你是否破解了IDE,你都无法真机预览 ,但是IDE里面的模拟器预览完全没有问题,能运行,能实现绝大部分功能,完全可以项目上先开发起来,等待一旦公测,就直接上线。
  不破解IDE

  先说结论:现在的最新版本IDE,完全不需要破解!

  
       
  • 最新版本的92300的IDE,mac下是一个dmg包,直接安装就能使用   
  • 选择+号添加项目你能看到创建新项目必须填写AppID   
  • 在92300版本里面,已经贴心的新增了一个 无AppID 的按钮,点了后会得到提示 无AppID部分功能受限   
  • 说的很吓人,这部分API很少,就2个,并且IDE提供了模拟数据返回,完全不影响绝大部分开发   
  • 你就是破解了,不提示部分功能受限,也是该没法正常还照样没法正常工作,毕竟微信也有自己的服务器验证,你破解后填的AppID终归是假的   
  • 选择工程目录,这时候切记如果你是从0开始创建工程,而不是拥有线程的wx小程序demo代码,一定要在选择工程目录的时候,创建全新文件夹   
  • 只有全新创建的文件夹才会开启quickstart自动创建初始工程文件功能,(如下图)自动创建好一个helloworld工程   
  • quickstart的自动创建工程,是可以无报错直接运行run起来的。   
  • 但如果文件夹内有文件,IDE就不会创建任何的初始文件的。  
   
前端外行的微信小程序瞎折腾之旅-1 (程序开发,客户端,技术,经典,山口)

  破解IDE

   首先,感谢 @老郭 以迅雷不及掩耳盗铃之神速第一时间破解了微信官方IDE,并且开源提供给大家使用, GitHub weapp-ide crack
  因为在早期的版本,微信的IDE,没有AppID的人是无法体验的,必须经过破解,才能开始自己写demo进行练手。而老郭在第一时间破解了IDE,让所有人能从代码上第一时间体验这个神秘的小程序(真机就没办法了)
   后来倒逼微信官方,把小程序IDE直接开放,才有了上面提到的 无AppID 模式。
   但是,我使用破解IDE的时候,发现很多人遇到了个问题,按部就班一步一步把IDE破解了,创建新工程的时候,是没有quickstart这一部的,如果什么都不太懂的人做到这一部,一打开工程,一个文件没有直接点运行,直接会报错,什么 can not find app.js 之类的, context 之类的错误,我看到这个后,直接从网上顺手找个demo(就在老郭的git里就有)扔到目录里,就一切运行了。
   所以目前我的感受就是,破解倒逼了微信官方开放无AppID体验,简直太威武了,但对于经验尚浅的新手,破解的一大堆东西和步骤,很可能会出现一大堆不知道为啥的错误提示的时候,真的不如直接下最新版IDE,不破解直接 无AppID 体验。
  开动起来

  
       
  • 官方文档全在这里 官方文档 ,里面包含简易教程,框架,组件,API,工具等等  
  官方文档其实内容真的不多,很多东西写的很浅,光看文档我是觉得很是吃力,因为很多前端开发的概念并不深入,很多标签,css的名字及其陌生,所以辅助上别人的demo食用就很赞了
  
       
  •   GitLab上面比较丰富的汇总Demo 这里面包括文章,和demo,demo有很多很赞的repo的,我这就只是搬运
           
    • 微信小应用示例代码(phodal/weapp-quick)     
    • 微信小应用地图定位demo(giscafer/wechat-weapp-mapdemo)     
    • 微信小应用- 掘金主页信息流(hilongjw/weapp-gold)     
    • 微信小程序(应用号)示例:微信小程序豆瓣电影(zce/weapp-demo)     
    • 微信小程序-豆瓣电影(hingsir/weapp-douban-film)     
    • 小程序 hello world 尝鲜(kunkun12/weapp)     
    • 微信小程序版2048小游戏(jeffche/wechat-app-2048)     
    • 微信小程序-微票(wangmingjob/weapp-weipiao)     
    • 微信小程序购物车DEMO(SeptemberMaples/wechat-weapp-demo)     
    • 微信小程序V2EX(jectychen/wechat-v2ex)     
    • 微信小程序-知乎日报(myronliu347/wechat-app-zhihudaily)     
    • 微信小程序-公众号热门文章信息流(hijiangtao/weapp-newsapp)     
    • 微信小程序版Gank客户端(lypeer/wechat-weapp-gank)     
    • 微信小程序集成Redux实现的Todo list(charleyw/wechat-weapp-redux-todos)     
    • 微信小程序-番茄时钟(kraaas/timer)     
    • 微信小程序项目汇总     
    • 微信小程序版聊天室(ericzyh/wechat-chat)     
    • 微信小程序-HiApp(BelinChung/wxapp-hiapp)     
    • 小程序Redux绑定库(charleyw/wechat-weapp-redux)     
    • 微信小程序版微信(18380435477/WeApp)   
       
  
       
  • 我的Github上面的小程序Demo 这个真的只是demo,是我们业务项目的雏形代码,我文章后面介绍的截图,功能,都不是这个Demo,都是我们的项目代码的  
  重要的事情说三遍,后面文章的截图不是这个Demo,不是这个Demo,不是这个Demo╮(╯_╰)╭
  quickStart 工程文件基础

  项目基础文件

  
       
  • app.json 这里对小程序所有的页面进行配置,其实详细的大家可以看官方文档,跟你app界面结构相关的就是前三个
           
    • “pages”字段表示app包含的所有页面,只有在这里注册过的页面才会有效进行编译,如果你的app不包含”tab”字段,那么app的首页就是”pages”数组里面的第一个page     
    • “window”字段是处理对于navigationbar的一些样式设置     
    • “tabBar”字段如果存在,表示app开启首页面为底部tabbar的形式,这样每个tab所对应的page在”tabBar”字段里设置     
    • “networkTimeout”,”debug”这两个字段一个配置全局网络超时,一个开启debug模式   
       
  
       
  • app.wxss 这里其实是全局的CSS,凡是在这里写过的CSS样式,在各自子page里面可以直接使用,写在其他.wxss文件里的样式是不能跨page使用的,[email protected],导入别的.wxss文件,[email protected]效,路径是相对路径   
  • app.js 这里就是纯js代码逻辑了,官方的demo里给你展示了一些基本代码,调用了微信的login接口,回调,读取用户头像,读本地存储之类的。并且通过js的一个全局函数 getApp() 可以获得app.js的这个app对象。  
  页面文件

   如果一个页面起名叫 HomePage ,那么我们就应该自行手动创建3个文件,文件名一致才会被系统正确的识别
  
       
  • HomePage.js 代表着这个页面的业务逻辑,当你在空白js里面输入page的时候会自动出现代码补全,帮你补全了一个page的所有生命周期,onLoad,onHide啥的,其他的js代码提示很不完善╮(╯_╰)╭   
  • HomePage.wxss 这里面写这个页面的专属css,别的页面不能使用,只在这个页面下可以用,但是可以被import到app.wxss里面,实现全局通用,并且wxss的代码提示非常完善,很爽,很多文档没写的css表,可以通过ide代码提示+推测标准css3,来知道如何编写   
  • HomePage.wxml 这里面写这个页面了,这种WXML语法看起来就很像html,但他还真不是html,html的东西完全不能直接在这里用。你必须用wx提供的wxml相关组件完全重写,条件渲染,循环渲染,数据绑定,都得按着微信的规定来,并且提供了最简单的模板模块功能,实现一定程度的复用。  
  还可以有个可选的HomePage.json文件,页面也是可以拥有自己的.json文件进行一些专属配置的,但是页面的json可以配置的字段不如app.json多,职能配置关于本window相关的一些表现,比如
  [code]{
"navigationBarBackgroundColor":"#ffffff",
"navigationBarTextStyle":"black",
"navigationBarTitleText":"微信接口功能演示",
"backgroundColor":"#eeeeee",
"backgroundTextStyle":"light"
}
[/code]  上手开搞

  
       
  • 创建一个新目录HomePage,创建好我们页面自己的HomePage至少三个文件   
  • HomePage.js里面写page,自动补全好页面生命周期,其余留空   
  • 修改app.json里面 “pages”字段,添加进去我们最新的页面路径,并且放到最上面。   
  • 直接点编译,你会发现,你的微信小程序已经在模拟器里面运行起来了,没有报错,只是空白一片,什么也没有嘛。  
  后面开始动手画UI了,这个我没有啥教学的,因为上文提供的github各种demo里面丰富多彩的所有组件用法已经够全的了,我这手把手的教如何写一个按钮,如何写一个text,如何水平排布好几段文字,这就有点太无脑了。我举例几个项目中用到的界面,然后写点我这个小白在趟出这些界面的时候遇到的一些问题点吧

前端外行的微信小程序瞎折腾之旅-2 (程序开发,客户端,技术,经典,山口)

12下一页
友荐云推荐




上一篇:Node.js Roku Remote
下一篇:HTML 表单详解
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

seancurrenceua8 发表于 2016-10-1 00:16:51
各位兄台,通融通融,沙发我来啦!
回复 支持 反对

使用道具 举报

黑泽罗 发表于 2016-10-1 05:51:55
顶贴以简简单单,但不能随随便便
回复 支持 反对

使用道具 举报

书文 发表于 2016-10-1 06:54:42
听听楼下怎么说
回复 支持 反对

使用道具 举报

刘鑫 发表于 2016-10-1 11:31:23
拥护楼主,楼主英明呀!!!
回复 支持 反对

使用道具 举报

贾益强 发表于 2016-10-1 11:50:13
不错 支持下
回复 支持 反对

使用道具 举报

最强微信助手 发表于 2016-10-1 13:24:25
逆袭成功。。。。。。
回复 支持 反对

使用道具 举报

刘凤娇 发表于 2016-10-3 03:47:04
有空一起交流一下
回复 支持 反对

使用道具 举报

陈菲菲 发表于 2016-10-14 00:27:20
我不在江湖,但江湖中有我的传说。  
回复 支持 反对

使用道具 举报

雷超 发表于 2016-10-16 00:20:43
想污染一个地方有两种方法:垃圾,或是钞票.
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表