微信小程序商城开发---真机测试有用
yj_best
8年前
<ul> <li> <h2>官方文档</h2> </li> <li> <p><a href="/misc/goto?guid=4959731138621131495" rel="nofollow,noindex">小程序开发文档</a></p> </li> <li><a href="/misc/goto?guid=4959731138712150768" rel="nofollow,noindex">小程序设计指南</a></li> <li><a href="/misc/goto?guid=4959717846309372036" rel="nofollow,noindex">小程序开发者工具</a></li> <li><a href="/misc/goto?guid=4959731138815060989" rel="nofollow,noindex">从搭建一个微信小程序开始(腾讯云)</a></li> </ul> <h2>实例教程</h2> <p>本实例纯属个人编写,侵删</p> <h3>一、环境搭建</h3> <p>在官网文档找到自己电脑适合的版本下载,直接安装(本人不建议使用破解版)</p> <ul> <li><a href="/misc/goto?guid=4959717846309372036" rel="nofollow,noindex">微信小程序最新工具下载</a></li> </ul> <p>接下来会提示使用微信二维码登录,直接扫码登录</p> <h3>二、下载demo</h3> <p>直接使用git工具clone 上述代码,点击添加项目,将本程序添加到项目中即可!</p> <p>(appid选择无AppID,项目名随便取不一定是文件名,选择下载下来的目录)</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/2dbe87ca5790d1eb85f005ddce21c355.png"></p> <h3>三、开始编写代码</h3> <p>进入调试页面(左边是调试预览,右边是类似于谷歌网页调试的工具)</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/42960b3b572554b2d22071aec02297db.png"></p> <p>进入编辑代码页面</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/b25a835e3754f66b05fed5276171a9aa.png"></p> <p>1、app.json是项目的配置文件,如右图显示,</p> <p>第一部分(黑色框)是pages是整个里的页面,每添加页面一个页面,都要把路径写在这里:</p> <p>第二部分tabbar只要配置这些文件就可以产生app底部的导航(具体可参见文档)</p> <p>第三部分是widows全局配置</p> <p>2、pages是指你每个页面里面有四个文件json(配置文件),js(自己编写的js),wxml(相当于html),wxss(相当于css)</p> <p>3、公共文件可以一般存储在远端,目前开发可以在本地新建,例如images(不能使用icon文件)</p> <p>4、更多详细可以联系博主</p> <h2>更多代码</h2> <ul> <li><a href="/misc/goto?guid=4959717015935412816" rel="nofollow,noindex">微信小应用示例代码(phodal/weapp-quick)</a></li> <li><a href="/misc/goto?guid=4959720517447647380" rel="nofollow,noindex">微信小应用地图定位demo(giscafer/wechat-weapp-mapdemo)</a></li> <li><a href="/misc/goto?guid=4959717016017850178" rel="nofollow,noindex">微信小应用- 掘金主页信息流(hilongjw/weapp-gold)</a></li> <li><a href="/misc/goto?guid=4959720517577770515" rel="nofollow,noindex">微信小程序(应用号)示例:微信小程序豆瓣电影(zce/weapp-demo)</a></li> <li><a href="/misc/goto?guid=4959720517655208397" rel="nofollow,noindex">微信小程序-豆瓣电影(hingsir/weapp-douban-film)</a></li> <li><a href="/misc/goto?guid=4959720517762570390" rel="nofollow,noindex">小程序 hello world 尝鲜(kunkun12/weapp)</a></li> <li><a href="/misc/goto?guid=4959731139094157209" rel="nofollow,noindex">微信小程序版2048小游戏(natee/wxapp-2048)</a></li> <li><a href="/misc/goto?guid=4959720517942817042" rel="nofollow,noindex">微信小程序-微票(wangmingjob/weapp-weipiao)</a></li> <li><a href="/misc/goto?guid=4959720518025079220" rel="nofollow,noindex">微信小程序购物车DEMO(SeptemberMaples/wechat-weapp-demo)</a></li> <li><a href="/misc/goto?guid=4959720518118659948" rel="nofollow,noindex">微信小程序V2EX(jectychen/wechat-v2ex)</a></li> <li><a href="/misc/goto?guid=4959720518214182080" rel="nofollow,noindex">微信小程序-知乎日报(myronliu347/wechat-app-zhihudaily)</a></li> <li><a href="/misc/goto?guid=4959720518304083500" rel="nofollow,noindex">微信小程序-公众号热门文章信息流(hijiangtao/weapp-newsapp)</a></li> <li><a href="/misc/goto?guid=4959719931048294959" rel="nofollow,noindex">微信小程序版Gank客户端(lypeer/wechat-weapp-gank)</a></li> <li><a href="/misc/goto?guid=4959720518419940755" rel="nofollow,noindex">微信小程序集成Redux实现的Todo list(charleyw/wechat-weapp-redux-todos)</a></li> <li><a href="/misc/goto?guid=4959720518516303582" rel="nofollow,noindex">微信小程序-番茄时钟(kraaas/timer)</a></li> <li><a href="/misc/goto?guid=4959720518608783991" rel="nofollow,noindex">微信小程序项目汇总</a></li> <li><a href="/misc/goto?guid=4959720518687041740" rel="nofollow,noindex">微信小程序版聊天室(ericzyh/wechat-chat)</a></li> <li><a href="/misc/goto?guid=4959719640917989835" rel="nofollow,noindex">微信小程序-HiApp(BelinChung/wxapp-hiapp)</a></li> <li><a href="/misc/goto?guid=4959719922654926781" rel="nofollow,noindex">小程序Redux绑定库(charleyw/wechat-weapp-redux)</a></li> <li><a href="/misc/goto?guid=4959720518850058778" rel="nofollow,noindex">微信小程序版微信(18380435477/WeApp)</a></li> <li><a href="/misc/goto?guid=4959731139597287681" rel="nofollow,noindex">小程序开发从布局开始(hardog/wechat-app-flexlayout)</a></li> <li><a href="/misc/goto?guid=4959731139686981670" rel="nofollow,noindex">微信小程序-音乐播放器(eyasliu/wechat-app-music)</a></li> <li><a href="/misc/goto?guid=4959731139769028165" rel="nofollow,noindex">微信小程序-简易计算器-适合入门(dunizb/wxapp-sCalc)</a></li> <li><a href="/misc/goto?guid=4959731139853381431" rel="nofollow,noindex">微信小程序-github(zhengxiaowai/weapp-github)</a></li> <li><a href="/misc/goto?guid=4959731139937553007" rel="nofollow,noindex">微信小程序-小熊の日记(harveyqing/BearDiary)</a></li> <li><a href="/misc/goto?guid=4959731140019999213" rel="nofollow,noindex">微信小程序(Seahub/PigRaising)</a></li> <li><a href="/misc/goto?guid=4959731140125893236" rel="nofollow,noindex">微信小程序(WeChatMeiZhi妹子图)</a></li> <li><a href="/misc/goto?guid=4959731140218837897" rel="nofollow,noindex">微信小程序快速开发骨架</a></li> <li><a href="/misc/goto?guid=4959731140325028156" rel="nofollow,noindex">微信小程序 - Artand 最专业的艺术设计平台</a></li> </ul> <h2>分析轮子</h2> <ul> <li><a href="http://mp.weixin.qq.com/s?__biz=MzI0MjYwMjM2NQ==&mid=2247483670&idx=1&sn=5aa5da2fff2415e9b19f848712ddf480&chksm=e9789904de0f1012159332fda391c3eec0bb3d1c0db2c34ab557208ff0c04806a40d00e844fe&mpshare=1&scene=1&srcid=1007cWRXdd0ug9oAceCsIWp6#rd" rel="nofollow,noindex">微信小程序倒计时组件(微信公众号)</a></li> <li><a href="http://mp.weixin.qq.com/s?__biz=MzI0MjYwMjM2NQ==&mid=2247483674&idx=1&sn=2bf242b391144f3f0e57e0ed0ebce36f&chksm=e9789908de0f101ee23f7c125c9a48c4f9ba3f242a3b1c89b05ca5b9e8e68262c02b47fe3d12&mpshare=1&scene=1&srcid=1008NvO9oI8wWGp4XBxlpLeL#rd" rel="nofollow,noindex">微信小程序下拉筛选组件(微信公众号)</a></li> </ul> <h3>经验分享</h3> <p>1、出现空白,没有报错,有可能是因为json是空。加一个{}就好了</p> <p> </p> <p> </p>