手机版

monsterk1:微信小程序第一章《四》初级练习章�

时间:2021-12-21 来源:互联网 编辑:宝哥软件园 浏览:

微信小程序开发快捷、方便、易用,学习成本不高,但好的程序员必须勤开发积累经验。在我的微信小程序第一章,笔者通读了微信小程序的演示,可以说收获颇多。很多事情只有自己理解了才能牢牢记住。在文章的最后一章,作者也说过,学习的话就要举一反三,通过现有的知识做出力所能及的事情,这才是开发者的最佳实践。所以笔者在这里推出一个初学者教程,里面的知识在demo中基本都有。只要你通读了我之前的文章,相信你也可以开发出一个简单的小程序。

好了,废话少说。让我们从applet示例的渲染开始:

monsterk1:微信小程序上手篇《四》初级实践篇(图1)

由于demo的学习有限,我暂时能想到的例子和这个应用差不多,但是技术是一步一步成长的,从小开始,然后变强。

前期准备:

1.准备好图片,百度搜索多的是。

px; font-size: 14px;"> 2.准备好json格式内容,我们的内容是以json形式存储的。

笔者是一名app开发,本想以json格式文件存储模型,但是一直找不到好的读取项目中本地json的方法,如有所知,能够评论告诉笔者,笔者先在此谢过。

这里笔者给大家一份自己写的json,仅供参考:

  1. [{"url":"http://www.huizhou.cn/food/rdtj/201211/W020121126369710784664.jpg","name":"猪肉","price":"32.4"},{"url":"http://www.sc115.com/wenku/uploads/allimg/131201/214G63238-0.jpg","name":"水果","price":"17.5"},{"url":"http://img1.gtimg.com/jiangsu/pics/hv1/78/113/1901/123641418.jpg","name":"蔬菜","price":"10.2"},{"url":"http://image.enmuo.com/CMS/2011/12/12/1/CMS_111212141009773_0E_400x267.jpg","name":"玩具","price":"50.1"},{"url":"http://pic.58pic.com/58pic/15/68/58/80Q58PIC2Yz_1024.jpg","name":"电脑","price":"4500.2"}]

大家以这样的格式写就好,内容自定。

做好前期准备,就正式进入敲代码阶段。

首先创建项目,然后将项目中没有用的东西删除掉:

1.utils的文件夹删除,此项目用不到;

2.pages中的logs文件夹删除,此项目用不到;

3.app.js中删除无用代码,留下一个空白的onLaunch方法和空白的globalData对象,app.json中删除"pages/logs/logs","navigationBarTitleText"改为我们的“小型超市购物”,app.wxss中我们将padding改为50rpx 0;

4.index的每一个文件都清空;

[{"url":"http://www.huizhou.cn/food/rdtj/201211/W020121126369710784664.jpg","name":"猪肉","price":"32.4"},{"url":"http://www.sc115.com/wenku/uploads/allimg/131201/214G63238-0.jpg","name":"水果","price":"17.5"},{"url":"http://img1.gtimg.com/jiangsu/pics/hv1/78/113/1901/123641418.jpg","name":"蔬菜","price":"10.2"},{"url":"http://image.enmuo.com/CMS/2011/12/12/1/CMS_111212141009773_0E_400x267.jpg","name":"玩具","price":"50.1"},{"url":"http://pic.58pic.com/58pic/15/68/58/80Q58PIC2Yz_1024.jpg","name":"电脑","price":"4500.2"}]

我们先从app.js文件着手,此时你的代码应该和我的一样:

  1. App({
  2. onLaunch: function () {
  3. },

版权声明:monsterk1:微信小程序第一章《四》初级练习章�是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。