精华内容
下载资源
问答
  • 扫描二维码登录进入微信开发者工具 (如下图)新建一个项目,勾选在当前目录中创建 quick start 项目 (此图片来源于网络,如有侵权,请联系删除! ) (如下图)就会出现一个HelloWorld的APP实例。 (此图片来源于网络...
  • 对于初学者来说,微信小程序的所有开发工作以后最好都在这个【微信开发者工具】上完成,编辑完了就可以调试真的很方便。微信给这个ide开发了window64、 window32 、max三个版本,连window都开发了两个版本,真的很...
  • 如果你还没看,那你赶紧去看看《微信小程序教程入门篇-(1):10分钟从0开始写一个hello-world-极其详细》,当然了,如果你是个大牛,当我没说。 本篇文章会设计到少量的html知识和大量的css知识,如果你不擅长html没...
        
    这次接着上一次的写,上一篇文章说的是 从0写一个hello world。如果你还没看,那你赶紧去看看《微信小程序教程入门篇-(1):10分钟从0开始写一个hello-world-极其详细》,当然了,如果你是个大牛,当我没说。

    本篇文章会设计到少量的html知识和大量的css知识,如果你不擅长html没关系,但是一定要懂css,不然看着就要蒙圈了。所以本文适合有一定css基础的人,如果你实在不会css,也可以先看完这篇文章,并且按照我说的一行一行代码写完,也是可以出来和我一样的效果的。然后在去一行一行的研究css代码的意思。一定要研究css的知识,理解每一句的意思,如果只是照葫芦画瓢,那不是一个开发工程师应该有的态度。我们要弄明白一切。如果是对小程序开发流程有兴趣的人当然也可以看看,只有好处没有坏处。

    熊熊依然开门见山,开整。。。。
    先来看看我们上次hello world的界面

    图1:

    clipboard.png

    干巴巴的hello world实在是太难看了,看着不爽,我需要把hello world几个字变成大红色。
    怎么弄,我教你啊:
    1、小程序样式的修改先讲两种方法:第一种是利用class属性,第二种是利用id属性。
    先说说利用class属性(熊熊喜欢class,所以先说它)。先把index.wxml里面原来的代码改成如下:

    <text class="red">hello world</text>
    

    那个“class”就是属性名字,不可更改,必须是“class”,“class=”等号后边,双引号里面是class的值,也叫样式名,这个随便起,不过建议大家根据你想让它变成的样式来起名,比如你想让他变成红色,可以起名red,你想让他加粗,起名可以是bold等。这个是个很好的开发习惯,别随意。class属性是写在标签内部的,什么是标签?标签,在本例中就是text,标签都是由<>包起来的。属性就写在<>里面。详细的请看:http://doc.pietian.com/?id=113
    好了,index.wxml页面的代码就改完了,然并卵,显示还是黑色,没有变红色啊

    图2:

    clipboard.png

    这个,当然的啦!我们上面只是定义了class的值也就是样式名,还没有给这个值指定要改变的内容呢。那接下来就开始给这个值定义样式的具体内容,样式的内容在index.wxss编写。打开index.wxss,在页面下写下如下代码:

    .red{
    
    color:red;
    
    }
    

    解释下这段代码,我们在index.wxml编写了class的值为red,在index.wxss中编写了red的样式内容,小程序规定,如果是class,那么在index.wxss中编写样式的内容时,样式名(class的值)前面就必须带有“.”,不要问为什么,这是小程序的龟腚,龟腚,龟腚!!!所以这里需要写“.red”,小程序还龟腚,所有的具体样式的代码必须写在“{}”里面,每一行样式写完以后必须用“;”结尾。这些都是龟腚!记住就行!“color:red”的意思“颜色:红色”,能明白么,不明白的下面评论留言吧!!如果你觉得只是变红色不过瘾,还想要字体变大,变粗,居中等其他的更加多的一些配置项,那你可以看看这里:http://www.w3school.com.cn/cs...,这里是css的一些配置项,讲的很详细(小程序还是支持95%的css属性的)。
    现在再看看是不是已经有了颜色,艾玛呀,这么简单的知识居然写了这么多字。。。。也是操心操碎了呢!!

    图3:

    clipboard.png

    接着说说id属性,先看看index.wxml改完以后的源码:

    <text id="red">hello world</text>
    

    看到没,就只把class改成id就行了,id属性的值还是可以随便取的,但是请不要这样做,取名字也要基于逻辑,这是个好习惯。好了,跟class一样,只改wxml页面是没有用的,我们也要修改index.wxss页面。上面说了,再修改index.wxss页面时,如果时class指定的样式名,前面用“.”,那如果是id指定的样式名呢,就肯定不能用“.”了,微信小程序龟腚,我们要用“#”。嗯哼,就是酱紫了,其他的规则的一样,直接看代码吧:

    #red{
    
    color:red;
    
    }
    

    图4:

    clipboard.png

    还是红色,有木有啊!!!
    其实除了class和id以外还有一个也可以编辑标签的样式,那就是利用标签本身,本案例的标签是text,我们可以不指定class和id也可以修改hello world为红色,怎么做呢?看下面喽
    去掉class和id,回归最原始的内容,

    index.wxml代码如下:

    <text>hello world</text>
    

    index.wxss的代码如下:

    text{
    
    color:red;
    
    }
    

    如果修改text的样式,在index.wxss页面中只写标签名字就行,不要加任何的前缀。“.”“#”统统的不要,不要的!!!这样写的话,页面中所有的该标签的样式都会改变。啥也不说了,看图:

    图5:

    clipboard.png

    图6:

    clipboard.png

    这是三个常用的样式设置的方法,那么你现在是不是产生了一个大的疑问,如果我三个都设置了,那么标签会按照哪个显示呢,好的,那就让我们看看:index.wxml代码如下:

    <text class="green" id="red"><hello world/text>
    

    我设置了hello world的class的值为green,id的值为red。

    index.wxss的代码如下:

    text{
    
    color:blue;
    
    }
    
    .green{
    
    color:green;
    
    }
    
    #red{
    
    color:red
    
    }
    

    如果按照标签本身设置的样式显示,那么hello world就应该是蓝色,如果按照class设置的样式显示,那么hello world就应该是绿色,如果按照id设置的样式显示那么hello world就应该是红色。啥也不说了,实践是检验真理的唯一标准,看结果:

    图7:

    clipboard.png

    还是红色的,说明按照id设置的样式显示的。也就是说三个都存在的时候,id设置的样式优先级最高。如果我把id去掉,也就是说index.wxml的代码变成了如下:

    <text class="green">hello world</text>
    

    index.wxss代码不变,我们再来看看显示什么颜色:

    图8:

    clipboard.png

    显示的是绿色的,也就是说没有id的情况下,会按照class设置的样式显示。这也就得出了一个结论:
    标签样式的优先级是 id(#) > class(.) > 标签
    这个跟css的优先级是一样的。但是,微信小程序是没有嵌入样式的(什么是嵌入样式?不懂就算了,微信小程序也用不着,html才有的)。
    当然了,微信小程序还支持其他三种选择方法,本文是入门篇暂时先略过,剩下的等我出高级篇再说喽。不过你们也可以先看看:http://doc.pietian.com/?id=173,有兴趣的自己钻研下!!
    2、好了,讲了这么多基础知识,现在说点理论的。小程序的每个页面的结构布局和样式(比如字体颜色,下划线,字体大小,图片大小等)分别由该页面所属的子文件夹的.wxml和.wxss控制。而且每个页面只能访问自己的wxml和wxss文件,不能跨页面访问。如果小程序内的页面需要用一些公共的样式,那么这些公共的样式代码可以在app.wxss中编写。
    比如,我们把刚刚在index.wxss中的写的代码,全部拷贝到app.wxss中,把index.wxss清空,然后index.html不变

    如图9:

    clipboard.png

    页面显示 hello world还是绿色,也就是说index.wxml自动加载了app.wxss的样式。微信小程序运行的时候,会首先获取当前页面下的.wxss页面内容,再获取app.wxss页面的内容,而且当前页面下的.wxss的样式的优先级比app.wxss的高。见:http://doc.pietian.com/?id=173最下面部分。

    图10:

    clipboard.png

    比如,index.wxss定义了text标签的颜色为red,app.wxss定义了标签的颜色为蓝色,那么页面会首先使用index.wxss中的颜色设置。

    index.wxss代码:

    text{
    
    color:red;
    
    }
    

    app.wxss代码:

    text{
    
    color:blue;
    
    }
    

    最终显示:

    图11:

    clipboard.png

    显然优先级要变成:
    标签样式的优先级是:单独页面的id(#)样式 >单独页面的class(.) 样式>单独页面的标签样式 > app.wxss中的标签样式
    好吧,看到这,不知道你们蒙不蒙,如果蒙就别看了,上面的知识足够用了,如果不蒙的话继续。
    那单独页面的标签样式,和app.wxss中的class样式,哪个的优先级高呢?尼玛,怎么会有这么多问题,不管了先解决了,做实验啦!
    比如index.wxml中的代码为:

    <text class="green">hello world<text>
    

    index.wxss的样式为:

    text{
    
    color:red;
    
    }
    

    如果app.wxss不定义样式,那么很明显,hello world的颜色会是红色。但是我们就是有困难要上,没有困难创造困难也要上,这说明什么呢?说明熊熊我很作死,不管啦,接下来制造困难啦!
    如果app.wxss中的代码是这样的:

    .green{
    
    color:green;
    
    }
    

    那么会怎么显示呢,不卖关子,
    上图12:

    clipboard.png

    显示是绿色的,这说明app.wxss中的class的样式比index.wxss的标签样式的优先级要高。好了,同理,那么app.wxss中的id的样式比index.wxss中的class样式的优先级要高。那么我们最终再丰富下我们的结论喽!
    标签样式的优先级是:单独页面的id(#)样式 >app.wxss中的id(#)样式 >单独页面的class(.)样式>app.wxss中的class(.)样式 >单独页面的标签样式 > app.wxss中的标签样式

    好啦,今天给hello world不少颜色了,先让它歇歇,下次教程,饶了hello wolrd 带大家高仿一个手机版的html页面,就这样了啦!!!最后给大家个彩蛋:
    *.wxml文件中可以编写任何自定义的标签,而且都可以编译,不会有任何问题,也不知道这是微信开发工具bug还是微信刻意为之,我发现以后觉得还挺惊喜的,不过我已经把这个情况反馈给微信官方了。不过毕竟也不会影响程序运行,就拿来玩玩也挺好,给你们看图:

    clipboard.png

    clipboard.png

    我个人开发了一个小程序搜索公众号叫“搜小程”,发文字或者语音就能搜索你需要的小程序,我也会在公众号第一时间发布我的教程,大家关注下,然后给我提提建议。下面是二维码:
    clipboard.png
    clipboard.png

    严正声明:
    联系原文作者可登陆www.pietian.com与作者交流。
    原文链接:http://www.pietian.com/articl...
    未经作者同意,谢绝及禁止任何形式转载,作者保留所有法律权限。

    展开全文
  • 这个教程适用对象:这文章适合所有的想学习微信小程序的新手们,需要你们有一点的html和css的基础。如果你只是想了解下小程序的开发流程这文章也特别适合你。大神们可以直接跳过这文章了。 微信专门为小程序...
        
    这个教程适用对象:这篇文章适合所有的想学习微信小程序的新手们,需要你们有一点的html和css的基础。如果你只是想了解下小程序的开发流程这篇文章也特别适合你。大神们可以直接跳过这篇文章了。 

    微信专门为小程序开发了一个ide叫做微信开发者工具。最新一版的微信开发者工具,把微信公众号的调试开发工作也集成了进去,可见微信对小程序多么的充满信心。对于初学者来说,微信小程序的所有开发工作以后最好都在这个【微信开发者工具】上完成,编辑完了就可以调试真的很方便。微信给这个ide开发了window64、 window32 、mac三个版本,连window都开发了两个版本,真的很佩服微信的用户体验。ide大家可以去百度搜索下载。
    下载安装完【微信开发者工具】打开ide看到的第一个画面

    图1:
    图片描述

    上面的按钮是小程序调试,下面的按钮是公众号调试,今天就只讲小程序了,公众号以后再讲或者直接略过了。
    选择“本地小程序项目”进入第二个画面,在这个画面里填写小程序的appid和项目名称以及项目所在目录。因为熊熊没有内测资格,所以我没有appid,这里就点击第一个框的右下方绿颜色字“没有appid”就行。然后填写项目名称,自己爱写什么就写什么好了,不过我建议大家不要随意,最好按照标准的流程来,写的正式一点,这是一个开发者的态度,我们应该重视每一个项目即使是一个小的学习demo。最后选择项目所在目录,这里也一样你可以选择任何一个目录,不过我还是希望大家能够为这个项目专门做一个目录。好了所有的都填完点击右下角“添加项目”就可以了。

    图2:
    图片描述

    接下来就进入了项目的正式开发的界面了,现在来说下这个界面:

    • 左边是小程序的页面效果展示界面,小程序的页面结构样式等效果会在左边显示出来。

    • 中间是项目的源文件结构目录。

    • 最右边是编码窗口可以在这里编辑代码。我们新建的项目进入以后什么都没有是空的,需要我们一点一点的手动编写代码。

    图3:
    图片描述

    好了接下来就带大家一步一步写一个hello world。
    编码之前讲一下小程序的开发规矩(担心有些初学者理解不了姑且叫规矩吧)接下来的内容很重要,仔细看哦!
    小程序开发需要三个描述整体程序的app文件 和 一个描述多个页面的 pages文件夹。

    (1)三个app文件分别是app.js,app.json,app.wxss。

    • app.js文件是脚本文件处理一些公共的或者全局的逻辑。比如在这里定义全局变量处理登录逻辑指定首页等。

    • app.json文件是小程序的整体配置文件。我们必须要在这个文件中配置小程序是由哪些页面组成的,我们还可以在这个文件中配置整个小程序的统一的窗口 背景色,导航条 样式,默认标题。但是必须注意该文件不可添加任何注释。

    • app.wxss文件是整个小程序的公共样式表。我们可以在小程序子页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。也就是说在这个文件里定义的样式在其他任何的子页面中都可以使用。这个也是为了代码的简洁和整体风格的统一。

    (2)接下来说pages文件夹:
    小程序的所有显示的页面都必须以子文件夹的形式存放在pages文件夹里面,包括首页。项目展示多少个页面,在pages文件夹下就要新建多少个子文件夹。每个页面的子文件夹,必须包括这四个文件:.js , .wxml , .wxss 和 .json(* 表示文件名)。这四个文件的文件名必须和子文件夹的名字一样。

    • *.js文件是当前页面脚本文件,也是业务逻辑的处理文件,当前页面的所有和后端服务器接口的交互,请求数据的逻辑都在这个文件完成,是核心文件,必须创建。

    • .wxml文件是搭建当前页面元素的文件。负责搭建当前页面的结构和布局,相当于网页开发中的.html文件,这个文件中存放一些类似于div span form input sectiond等布局代码,必须创建。

    • *.wxss文件是当前页面的样式文件。负责调整当前页面的样式,元素之间的间距,字体的大小,字体颜色,背景图等,相当于网页开发中的css文件,需要时创建。

    • *.json文件是当前页面的配置文件。配置当前页面的窗口背景色,导航条样式,默认标题等,需要时创建不需要千万不要创建,这里我发现一个bug,就是如果创建了这个配置文件,但是配置文件中没有任何内容,那么页面渲染的时候什么也显示不出来,所以如果创建了这个文件,那么就必须在这个文件里写点什么即使写“{}”也行,要不然就不要创建。(个人猜测:是如果json文件为空,小程序在加载的时候就认为这个json配置是错的,页面渲染终止。我已经把这个bug提交给微信官方了!!!)

    以上这四个文件只作用于当前的页面,不作用于整体和其他页面

    手册截图,图4:
    图片描述

    说了这么多,现在要正式开发啦:
    1、点击 目录窗口 右上角的 + 号,创建一个pages文件夹和app.js,app.json,app.wxss文件。创建完成以后就是下面这个样子:

    图5
    图片描述

    2、此时pages文件夹下还没有任何的页面,现在我们的项目需要一个首页,那么就需要在pages目录下新建首页的子文件夹,点击 pages那行的最右边的 +号创建index子文件夹,然后点击index那行的最右边的+号,在这个子文件夹里把那3个文件创建完(鉴于上文发现的bug,这里就先不创建index.json文件,需要时再创建)。

    这里要注意,3个文件必须和目录同名。

    完成以后,就是下面这样

    图6:
    图片描述

    3、页面结构现在已经完成了,该有的页面也有了。但是,此时此刻页面上居然什么也没有显示,当然了,因为我们还没写代码呢!
    好吧,接下来,开始敲~代~码~~~~
    上面已经说了,wxml是搭建页面元素的文件。我从子页面的wxml文件开始,来一点一点的编写。写下第一行代码:

    <text>hello world!</text>
    

    写完了,crtl+s保存就行。今天子页面的代码编写工作已经完成了,是不是很惊悚,很难以置信。今天,子页面就写这一行代码。

    如图7:
    图片描述

    4、首页页面虽然我们写好了,但是现在小程序的页面上还是什么都没有显示。
    别着急!这是因为我们还没有配置。如果想要页面显示出来,就必须在app.json中配置小程序的页面,参数为pages。pages是一个数组,其中的每个元素都是每个页面的相对根目录的路径+文件名,文件名不需要写后缀,小程序运行的时候会自动去寻找.json .wxml .wxss .js四个文件。数组的第一项表示小程序的初始页面,也就是首页,小程序的每个页面都需要在数组中配置,并且以后小程序页面增加或者减少都需要修改pages数组。
    现在我们在app.json中写下我们的配置信息,我们把index做为小程序的初始页面,代码如下:

    {"pages": [
    
        "pages/index/index"
    
        ]
    
    }
    

    图8:
    图片描述

    注意:配置文件的编写遵循json的格式,参数需要用双引号""括起来,配置文件的开始和末尾需要用大括号"{""}"包含。

    下一篇文章,讲带领大家给hello worl的一点颜色瞧瞧:《微信小程序教程入门篇-(2):给hello world一点颜色瞧瞧-最后有彩蛋-极其详细》
    如果你对这些基础知识已经烂熟于心了,那么这篇文章可以帮助你快速开发一个完整的小程序demo ----->《微信小程序实战—知乎日报》
    我个人开发了一个小程序搜索公众号叫“搜小程”,发文字或者语音就能搜索你需要的小程序,大家关注下,然后给我提提建议。
    下面是二维码
    图片描述
    图片描述

    严正声明:
    联系原文作者可登陆www.pietian.com与作者交流。
    原文链接:http://www.pietian.com/articl...
    未经作者同意,谢绝及禁止任何形式转载,作者保留所有法律权限。

    展开全文
  • 这个教程适用对象:这文章适合所有的想学习微信小程序的新手们,需要你们有一点的html和css的基础。如果你只是想了解下小程序的开发流程这文章也特别适合你。大神们可以直接跳过这文章了。 微信专门为小程序...

    熊熊不懂得打情骂俏直接开门见山开始开发之旅。


    这个教程适用对象:这篇文章适合所有的想学习微信小程序的新手们,需要你们有一点的html和css的基础。如果你只是想了解下小程序的开发流程这篇文章也特别适合你。大神们可以直接跳过这篇文章了。

    微信专门为小程序开发了一个ide叫做微信开发者工具。最新一版的微信开发者工具,把微信公众号的调试开发工作也集成了进去,可见微信对小程序多么的充满信心。对于初学者来说,微信小程序的所有开发工作以后最好都在这个【微信开发者工具】上完成,编辑完了就可以调试真的很方便。微信给这个ide开发了window64、 window32 、max三个版本,连window都开发了两个版本,真的很佩服微信的用户体验。ide大家可以去这里下载:http://doc.pietian.com/?id=177

    下载安装完【微信开发者工具】 打开ide看到的第一个画面

    图1:

    1.jpg

    上面的按钮是小程序调试,下面的按钮是公众号调试,今天就只讲小程序了,公众号以后再讲或者直接略过了。

    选择“本地小程序项目”进入第二个画面,在这个画面里填写小程序的appid和项目名称以及项目所在目录。因为熊熊没有内测资格,所以我没有appid,这里就点击第一个框的右下方绿颜色字“没有appid”就行。然后填写项目名称,自己爱写什么就写什么好了,不过我建议大家不要随意,最好按照标准的流程来,写的正式一点,这是一个开发者的态度,我们应该重视每一个项目即使是一个小的学习demo。最后选择项目所在目录,这里也一样你可以选择任何一个目录,不过我还是希望大家能够为这个项目专门做一个目录。好了所有的都填完点击右下角“添加项目”就可以了。
    图2:

    2.jpg

    接下来就进入了项目的正式开发的界面了,现在来说下这个界面:
    左边是小程序的页面效果展示界面,小程序的页面结构样式等效果会在左边显示出来。

    中间是项目的源文件结构目录。

    最右边是编码窗口可以在这里编辑代码。

    我们新建的项目进入以后什么都没有是空的,需要我们一点一点的手动编写代码。
    图3:

    3.jpg

    好了接下来就带大家一步一步写一个hello world。
    编码之前讲一下小程序的开发规矩(担心有些初学者理解不了姑且叫规矩吧)接下来的内容很重要,仔细看哦!

    小程序开发需要三个描述整体程序的 app文件 和 一个描述多个页面的 pages文件夹。

    (1)三个app文件分别是app.js,app.json,app.wxss。

                app.js文件是脚本文件处理一些公共的或者全局的逻辑。比如在这里定义全局变量处理登录逻辑指定首页等。

                app.json文件是小程序的整体配置文件。我们必须要在这个文件中配置小程序是由哪些页面组成的,我们还可以在这个文件中配置整个小程序的统一的窗口 背景色,导航条  样式,默认标题。但是必须注意该文件不可添加任何注释。

                app.wxss文件是整个小程序的公共样式表。我们可以在小程序子页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。也就是说在这个文件里定义的样式在其他任何的子页面中都可以使用。这个也是为了代码的简洁和整体风格的统一。


    (2)接下来说pages文件夹:

    小程序的所有显示的页面都必须以子文件夹的形式存放在pages文件夹里面,包括首页。项目展示多少个页面,在pages文件夹下就要新建多少个子文件夹。每个页面的子文件夹,必须包括这四个文件:*.js   ,  *.wxml   ,  *.wxss  和 *.json(* 表示文件名)。这四个文件的文件名必须和子文件夹的名字一样。
    *.js文件是当前页面脚本文件,也是业务逻辑的处理文件,当前页面的所有和后端服务器接口的交互,请求数据的逻辑都在这个文件完成,是核心文件,必须创建。

    *.wxml文件是搭建当前页面元素的文件。负责搭建当前页面的结构和布局,相当于网页开发中的*.html文件,这个文件中存放一些类似于div  span  form  input  sectiond等布局代码,必须创建。

    *.wxss文件是当前页面的样式文件。负责调整当前页面的样式,元素之间的间距,字体的大小,字体颜色,背景图等,相当于网页开发中的css文件,需要时创建。

    *.json文件是当前页面的配置文件。配置当前页面的窗口背景色,导航条样式,默认标题等,需要时创建不需要千万不要创建,这里我发现一个bug,就是如果创建了这个配置文件,但是配置文件中没有任何内容,那么页面渲染的时候什么也显示不出来,所以如果创建了这个文件,那么就必须在这个文件里写点什么即使写“{}”也行,要不然就不要创建。(个人猜测:是如果json文件为空,小程序在加载的时候就认为这个json配置是错的,页面渲染终止。我已经把这个bug提交给微信官方了!!!)


    以上这四个文件只作用于当前的页面,不作用于整体和其他页面。

    (详细内容可以去看手册:http://doc.pietian.com/?id=163

    手册截图,图4:

    4.jpg说了这么多,现在要正式开发啦:


    1、点击 目录窗口 右上角的 + 号,创建一个pages文件夹和app.js,app.json,app.wxss文件。创建完成以后就是下面这个样子:


    图5

    5.jpg2、此时pages文件夹下还没有任何的页面,现在我们的项目需要一个首页,那么就需要在pages目录下新建首页的子文件夹,点击 pages那行的最右边的 +号创建index子文件夹,然后点击index那行的最右边的+号,在这个子文件夹里把那3个文件创建完(鉴于上文发现的bug,这里就先不创建index.json文件,需要时再创建)。这里要注意,3个文件必须和目录同名。完成以后,就是下面这样


    图6:

    6.jpg3、页面结构现在已经完成了,该有的页面也有了。但是,此时此刻页面上居然什么也没有显示,当然了,因为我们还没写代码呢!

    好吧,接下来,开始 敲~~~代~~~码~~~~
    上面已经说了,wxml是搭建页面元素的文件。我从子页面的wxml文件开始,来一点一点的编写。写下第一行代码:

    <text>hello world!</text>


    写完了,crtl+s保存就行。今天子页面的代码编写工作已经完成了,是不是很惊悚,很难以置信。今天,子页面就写这一行代码。

    如图7:

    7.jpg4、首页页面虽然我们写好了,但是现在小程序的页面上还是什么都没有显示。

    别着急!这是因为我们还没有配置。如果想要页面显示出来,就必须在app.json中配置小程序的页面,参数为pages。pages是一个数组,其中的每个元素都是每个页面的相对根目录的路径+文件名,文件名不需要写后缀,小程序运行的时候会自动去寻找.json  .wxml .wxss .js四个文件。数组的第一项表示小程序的初始页面,也就是首页,小程序的每个页面都需要在数组中配置,并且以后小程序页面增加或者减少都需要修改pages数组。(详细配置信息可以去看:http://doc.pietian.com/?id=109


    现在我们在app.json中写下我们的配置信息,我们把index做为小程序的初始页面,代码如下:

    {
        "pages": [
          "pages/index/index"
        ]
    }


    图8:

    8.jpg

    注意:配置文件的编写遵循json的格式,参数需要用双引号""括起来,配置文件的开始和末尾需要用大括号"{""}"包含。

    好了今天这个hello world的初级项目就讲到这,下次给大家讲下页面渲染。最后给大家一个彩蛋,微信小程序离线开发手册下载地址:http://pan.baidu.com/s/1eSoNA4E

    最新的文章我会首先发表在我个人的微信订阅号(搜索:pietian)上。可以扫码关注我的订阅号,或者搜索pietian关注我哦。

    30164241_Xsq4.jpg

     

    转载于:https://my.oschina.net/u/3188012/blog/814223

    展开全文
  • 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果。 入门篇 开发准备工作 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的“设置”-“开发者设置”中,...
  • 微信小程序-入门篇

    千次阅读 2017-05-21 22:40:33
    微信小程序简单入门篇

    转载请标明出处:
    http://blog.csdn.net/iamzgx/article/details/72615506
    本文出自:【iGoach的博客】

    前言

    2017年1月9日,微信小程序发布。这也标志着FaceBookRN,阿里的WeexTencent的小程序这三架马车在2017年并驱骑行。今天,就先来说说三架马车其中之一的小程序。

    # 搭建开发环境

    1.成为微信开发者
    微信公众平台注册账号并成为微信的个人或企业开发者

    2.下载开发工具
    点击下载,然后傻瓜式安装好就行了

    3.安装NodeJs
    官网下载NodeJs,然后也是傻瓜式的安装好,安装好后,NodeJS会自动在PC的环境变量Path里面添加安装好的NodeJS根目录,最后再DOC执行node命令验证是否安装好就行了,安装好后如下图:

    NodeJS.png

    创建HelloWorld

    打开微信Web开发工具,可以看到

    创建项目.png

    如果是企业开发者,直接填写AppID就好了,如果不是我们点击无AppID,如果我们前面没有安装NodeJS,这里是不会显示无AppID的,所以我们得正确安装NodeJS
    接下来就是填写项目名称和项目工作目录就行了。点击添加项目,我们就创建好了第一个项目。如下图

    创建完后.png

    目录结构及配置

    创建好后,目录结构如下图

    目录结构.png

    从整体来看,小程序遵循的是MVC模式,小程序分为视图层View和逻辑层AppService的两层框架,并在视图层和逻辑层之间提供数据传输和事件系统。

    • app.js,它主要是放置一些程序的全局变量、属性或方法以及执行程序的一些生命周期,比如onLaunch(),onShow(),onHide()。当程序一启动的时候就会执行onLaunch()方法,当页面显示的时候执行 onShow()方法,当界面隐藏或转换到后台的时候执行onHide()方法。
    • app.jsonpages配置所有页面的路径,在window对象里面配置window的样式,在tabBar设置底部tab的样式,在networkTimeOut对象里面配置一些全局超时变量,通过debug赋值是否开启调试模式。
    • app.wxss 相当于css文件,全局样式,在所有页面都可以调用。
    • index.js 第一个页面的逻辑层,包括一些事件处理函数,还有一个onLoad()方法,当页面加载完后会执行。
    • index.json 可以覆盖一些窗口navigationBar的一些属性。
    • index.wxml 页面的视图布局文件,相当于Androidxml布局。其中里面的view相当于div,其中bindtap属性指的是点击事件,然后对应的点击事件在index.js里面处理。
    • index.wxss 首页的一些样式,供index.wxml的根节点属性使用。

    在创建一个页面的时候,其中xxx.jsxxx.wxml是必须的文件,其他的文件是非必须。

    响应的数据绑定

    根据上面创建的HelloWorld代码基础上,添加一个按钮,实现点击按钮改变data对象的属性motto属性值,从而实现简单的响应数据绑定布局效果。
    首先在首页的视图文件 index.wxml通过button组件添加一个按钮,代码如下:

    <!--index.wxml-->
    ...
      <view class="usermotto">
        <text class="user-motto">{{motto}}</text>
        <button bindtap="bindMottoTap" class="userMottoBtn">点击</button>
      </view>
    </view>

    index.wxss里面添加一点点样式

    /**index.wxss**/
    ...
    .usermotto {
      margin-top: 200px;
      text-align: center;
    }
    .userMottoBtn{
      width: 200px;
      height: 50px;
      margin-top: 10px;
    }

    接下来在index.js里面添加点击事件

    //index.js
    ...
      bindMottoTap: function() {
        this.setData({
          motto:"Hello 小程序"
        })
      },
      ...
    })

    然后编译后,我们点击可以实现下面的效果

    weLite.gif

    模块化

    从上面项目中的logs页面,就可以看到一个简单的模块化代码使用,它可以很好的处理代码公用部分,从而提高代码的复用性

    //logs.js
    var util = require('../../utils/util.js')

    从上面的代码可以看出,模块化是通过require这个关键词使用的,然后传入一个相对路径参数,从而获取模块化代码的对象,通过获取的这个对象调用相关的方法和属性。
    比如调用util.jsformatNumber()方法,就可以在log.js里面直接调用

    util.formatTime(new Date(log))

    其中,util.js方法可以在任何页面里面使用,从而实现部分代码的模块化

    创建一个简单的登录页面

    通过Pages创建一个新页面login,结构如下图

    登录.png

    1.在login.json修改下naigationBar的标题

    {
      "navigationBarTitleText": "登录"
    }

    2.在login.wxml里面创建视图样式

    <!--login.wxml-->
    <view class="container">
      <view class="section">
        <input id="username" type="text" placeholder="请输入用户名" maxlength="10" bindinput="bindUserName" focus="true"/>
      </view>
      <view class="section">
        <input id="password" type="password" placeholder="请输入密码" bindinput="bindPassWord" focus="false"/>
      </view>
      <button type="button" class="btn" bindtap="loginBtn">登录</button>
    </view>

    3.在login.wxss里面添加一些css样式

    /* login.wxss */
    .section{
      height: 25px;
      width: 50%;
      background-color: #F2F2F2;
      margin: 10px;
      padding: 10px;
      text-align: left
    }
    .btn{
      width: 25%;
      height: 45px;
      margin: 10px;
      text-align: center;
    }

    4.在login.js处理响应的事件

    // login.js
    Page({
      data: {
        username:'',
        password:''
      },
      bindUserName: function(e) {
        this.setData({
          username:e.detail.value
        });
      },
      bindPassWord: function(e) {
        this.setData({
          password:e.detail.value
        });
      },
      loginBtn: function() {
        if(this.data.username=="goach"&&this.data.password=="123456"){
          wx.navigateTo({
            url: '../index/index',
          })
        }else{
          wx.showModal({
            title: "用户名或密码不正确",
            showCancel:false,
            duration:2000
          });
        }
      },
    })

    4.最后再app.jsonpages第一行配置login页面,把login页面做为首页

    {
      "pages":[
        "pages/login/login",
      ...
      ],
    ...
    }

    在上面代码中,通过 input组件实现两个输入框,然后添加了一个button,通过获取到两个输入框的输入值来简单验证用户名和密码是否正确,如果正确则通过wx.navigateTo()来跳转到index页面,如果不正确,则通过wx.showModel显示提示框。
    最后显示的效果如下:

    login.gif

    实现首页Tab化

    很多小程序底部都会有tab效果,如果样式比较简单,直接用小程序为我们提供的tabBar即可,实现这种效果只需要在app.json里面添加tabBar`的代码

    {
      ...
      "tabBar": {
        "color": "#000000",
        "selectedColor": "red",
        "borderStyle": "white",
        "list": [{
          "pagePath": "pages/index/index",
          "text": "首页",
          "iconPath":"pages/images/b_index_press_night.png",
          "selectedIconPath":"pages/images/b_index_press.png"
        },
        {
          "pagePath": "pages/logs/logs",
          "text": "日志",
          "iconPath": "pages/images/b_log_press_night.png",
          "selectedIconPath": "pages/images/b_log_press.png"
        }],
        "position": 0
      }
    }

    其中注意的一点就是,如果当前页面带有tab,那么从一个页面跳转到当前页面就不能使用wx.navigateTo()来进行跳转了,应该使用wx.switchTab()来跳转,比如上面的login页面跳转到index页面,就得把代码改成

      wx.switchTab({
            url: '../index/index',
          })

    最后实现的效果如下

    tab.gif

    展开全文
  • 微信小程序开发入门篇 https://blog.csdn.net/xiangzhihong8/article/details/53738417
  • 本节目标:通过上一节的讲解,相信大家对微信小程序有了初步的了解。接下来将会对小程序的框架进行简单介绍。 目标用户:无编程经验,但对微信小程序感兴趣的同学。 学习目标:了解MINA框架的基本特征,并对数据绑定...
  • 本节目标:通过之前的讲解,相信大家对于微信小程序本身有了一定的认识。本将专注于讲解IDE的调试功能。 目标用户:无编程经验,但对微信小程序感兴趣的同学。 学习目标:了解并使用微信开发工具的调试功能。 案例...
  • 目标用户:无编程经验,但对微信小程序感兴趣的同学。 学习目标:开发者工具的基本使用流程,即创建、导入、删除、关闭项目。 案例分析:创建helloworld应用,相似于微信官网简易教程中的quickstart demo。 备注:有...
  • 目标用户:无编程经验,但对微信小程序感兴趣的同学。 学习目标:对微信小程序的研发,有概要的了解,并对基本知识点有一定的认识,不需要深入追究。仅记80/20定律。 案例分析:helloworld小程序。 2. 知识点 精通 -...
  • 目标用户:无编程经验,但对微信小程序感兴趣的同学。 学习目标:了解MINA框架的视图层(View),逻辑层(App Service),及其之间的交互。 案例分析:helloworld小程序。 备注:有编程经验或看过微信官网简易教程的同学...
  • 目标用户:无编程经验,但对微信小程序感兴趣的同学。 学习目标:了解MINA框架的目录结构和配置。 案例分析:helloworld小程序。 备注:有编程经验或看过微信官网简易教程的同学,请酌情略过该章节。 2. 目录结构...
  • 微信小程序开发入门练习
  • 目标用户:学习过【入门篇】的同学或有一定编程经验的同学。 学习目标:概要了解由业务建模要需求设计阶段。 案例分析:游戏2048。 2. 游戏2048 (此图片来源于网络,如有侵权,请联系删除! )  通过试玩,我们...
  • 目标用户:学习过【入门篇】的同学或有一定编程经验的同学。 学习目标:如果2048”就是一个页面,那么开始动手吧! 案例分析:游戏2048。   2. 对需求设计做减法 上一节的流程图相信大家都看了。对于怎么研发自己...
  • 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果。 开发准备工作 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的“设置”-“开发者设置”中...
  • 最近在学习小程序开发,这是查看微信公众号官网,自己总结的一篇小程序开发文档,如果有不对的,欢迎大家指出,让我们共同进步。 开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的...
  • <view capture-bind:tap='captureView' bind:tap='bindView' catch:tap='catchView'> </view>

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,675
精华内容 6,670
关键字:

微信小程序教程入门篇

微信小程序 订阅