精华内容
下载资源
问答
  • 微信小程序开发教程

    2018-11-13 19:21:52
    微信小程序开发教程介绍,简单的介绍了微信小程序的发展情况,为小程序课程的第一课
  • 微信小程序开发教程2.zip
  • 微信小程序开发教程(第1篇)

    万人学习 2016-10-17 08:24:00
    微信小程序开发教程​”以腾讯官方资料为主,系统讲解微信小程序开发的相关的知识点。 全套课程共3篇 微信小程序实战教程(第1篇)——讲解小程序基础知识点,重点讲解小程序开发工具,视图层(View)和逻辑层(App ...
  • 南宁微信小程序开发教程已讲了两讲节课,下面我们来讲微信小程序开发的第三节课程。前面已说过微信小程序的目录结构,那么当学习认识了微信目录结构后,接下来就学习微信小程序的视图和渲染。什么叫微信小程序的视图...

    南宁微信小程序开发教程已讲了两讲节课,下面我们来讲微信小程序开发的第三节课程。前面已说过微信小程序的目录结构,那么当学习认识了微信目录结构后,接下来就学习微信小程序的视图和渲染。什么叫微信小程序的视图我想有传统PC端等网络编程或开发的程序员都比较熟悉,什么叫做视图。简单点来说就是网站或系统显示出来的界面,我们就不要说那些生硬的术语了,视图就是显示出来的结果。我们先来看着一下本节课的大纲是什么,要学习什么内容

    1c22806e20868b51a7d8f49d1a3da63a.png

    什么是组件第一个是组件的基本使用,那么组件在官方小程序开发文档中简略了说明了组件就是视图容器,基础内容容器,表单组件等等,其实简略的说就是容器,它是由微信小程序已经强制制定了的容器,开发微信小程序时使用组件必须要遵守开发文档所定义的组件名称。大家可能都理解,容器在html中是什么,简单来讲就像是一个存放数据的盒子一样,一个这个标签对就叫做一个微信小程序的组件。组件的标签名称必须都是使用小程序已制定了的标签对,如果自已乱写标签对的话,那么是无法在微信开发工具中显示的,是会报错的。如下图:

    01ca708fea8a6a8865e8d605799c7baf.png

    我们知道了什么叫做组件了之后,再来说说上面开头所说的视图。那么之前也讲过,微信小程序中每个页面都会有一个子目录来保存这个页面的js后缀文件,我们估且把后缀为js的文件叫做控制器文件,以方便快速理解。有了控制器文件后,那么视图文件就是后缀为wxml的文件,就叫做微信小程序的视图文件了。而后缀为wxss的文件,我们叫做微信小程序的样式文件。每个微信小程序页面目录通常都包含这三个文件,这样子就构成了一个完整的小程序页面了。

    a7ba041d86f994ce9c6bdb7fb000ce34.png

    为了方便快速入门,我们可以直接在pages目录中创建一个子目录为firstpage。这个目录就代表微信小程序的首页目录,不使用index目录。当在开发工具中创建好了微信小程序首页目录后,我们可以直接进行调试一下(或叫编译),看看会发生什么样的结果。当编译时,就会在开发工具的右边出现了报错信息。

    这是为什么呢?其实就告诉我们,当我们在pages目录中创建首页子目录firstpage后,必须要在小程序的配置文件app.json进行路径的配置才可以,同时也告诉我们首页子目录firstpage中是空白的,没有first.js控制器文件。请注意一下,控制器文件的命名其实就是使用了子目录中的第一个单词,这也是小程序默认的,我们就使用默认的命名就好了。也就是说微信小程序每个页面的子目录在命名时使用了什么,那么其中的三个控制器文件,视图文件,样式文件都会使用子目录默认的命名来做为它们的名称。既然开发工具告诉我们当新创建了一个小程序页面时,必须要在配置文件app.json文件中进行路径的配置,那么我们就首先要到app.json文件来进行路径的配置。即在pages:[]这里写上"pages/firstpage/first"这样的路径,它代表指向了pages目录中的子目录firstpage中的first.js控制器文件。通过这点我们就知道,配置文件配置的路径都是必须指向每个微信小程序页面目录的控制器文件,我们就这样来理解更方便,也可以避免了混洧,因为传统的程序开发都是必须先有编写控制器,然后再在控制器中进行视图的渲染的。如下图:

    c18ebf635adfc6b3c5d5d4d41800b706.png

    当配置了路径后,我们就要在firstpage目录中创建一个first.js控制器文件,创建的方法就是在每个目录的右边有一个小加号,点击它并选择js后缀选项就可以创建了first.js控制器文件了,视图文件和样式文件的创建也是类似的,只要选择它们对应的后缀就行了,我们就把这三个文件都创建出来。接着我们打开first.js控制器文件,此时它是空白的,我们必须要在其中写入逻辑代码。微信小程序页的逻辑很简单,其实就是直接在控制器文件中调用一个page()方法就行了,这个方法里面调用的数据一般都包含了几个数组,分别为data:{}数组,onLoad,onReady,onShow,onHide这几个事件函数。要注意代码它们的各自的写法,事件函数使用事件名:function(){}这样的写法,这是默认的微信小程序写法,它们的作用和传统的js代码中事件函数是一样的。

    d4c000e7814e35c4f08cb05268557a31.png

    其中小程序的方法调用的写法也要注意是pages({})这样的方式,比传统的多了一个{}符号,所以微信小程序的程序的写法是我们必须要记住的,它和传统的程序写法有比较大的区别。当我们把控制器文件first.js编写好的,我们可以直接来编译一下看看有什么结果,结果会发现,界面显示除了顶部的栏目的文字显示外,整个界面是空白的,这是因为我们虽然创建了视图文件first.wxml,但是里什么内容都没有写,那么结果显示当然是空白的。所以接下来我们必须要到视图文件中编内容。上面说到组件的知识,那么实际上视图文件中一般都是由各个组件来构成的,即由不同的容器来构成视图文件的内容。所以说视图内容的编写就是把组件写出来构成视图文件的内容,如在视图文件中写入你好,欢迎光临后,在开发工具中进行编译一下,结果发现刚才首页没有内容显示的空白部分,就会显示了“你好,欢迎光临”这一行字。到这里,我们整个首页的创建就完成并成功显示了,相信大家通过这个例子就理解了组件的如何使用了。二。数据的绑定我们知道了组件就是使用微信小程序已规定的各个组件来书写在视图文件中,就可以得到显示的结果了,那么数据的绑定,也比较简单。所谓的数据绑定,它的意思就是不要直接在视图中书写内容文字或数据内容,而是通过在js控制文件中给某个变量定义内容,然后在视图文件中的组件中使用--{{变量名}}--这样的方式就达到数据的绑定,也就是说它和直接在视图文件中书写内容文字的作用一样,只不过内容由控制器来定义,而不是在视图中直接书写。

    0839ab598bb6bfa739e51a6f35240219.png

    如上图。而在js控制器文件中哪个地方定义这个变量名呢?就是在data:{}这个数组中进行定义,如motto:"欢迎光临华兰网络",这样子就定义了一个motto变量了。数据绑定到底有什么作用呢,可以这么说数据绑定―――其实就是和php中动态从服务器中获取数据并显示出来一样,只是这里的数据是要在js文件中data{}中定义并提供,而php则是数据库数据表中提供数据而已。这就是数据绑定的重大作用。
    三、
    什么渲染标签
    所谓的渲染标签就是标签对,这个标签对,或者叫做这个组件可以在其中使用条件判断语句,也可以使用循环语句。现在先不讲复杂的条件和循环语句,你只要知道view标签就是视图文件的输出显示的意思就行了,或者叫做渲染输出。
    四、什么叫做模板有过程序开发的程序员都知道,模板就是
    把每个页面相同的部分提取出来变成模板,然后在每个页面要使用时,只需要载入这个模板就行了,而不用再去每次都手动编写一次相同部分的内容了――――这样子就叫做模板。那么有一点就要注意的是,模板当然是视图文件的一种,那么就必须是使用xxxx.wxml这样的文件名来命名,所以只要创建了一个模板文件后,然后在另一个视图文件中使用这样的方式引入模板文件即可,比如说把小程序头部作成模板文件,然后在首页中,就可以不用再编写头部内容,而是直接引入头部模板文件即可。引入模板文件还有第二种方法是使用方式来引入或加载模板。微信小程序开发教程的第三节内容,大概就是这样子了,我们这节课程讲了组件的使用,数据绑定,渲染标签,模板的使用四个方面,其中还举例了新创建一个微信小程序页面的例子,通过这个例子,大家应该能够知道如何创建一个新的微信小程序的页面了,同时该怎么进行数据绑定和组件等如何使用大家可举一反三。我们华兰网络www.bjsangmao.com专注于网站建设,微信公众号开发,微信小程序开发,SEO优化,网络营销服务,如果客户有需要使用这些服务的可以联系我们。微信小程序开发教程的第三课就讲到这里,我们的课程针对的是不懂微信小程序开发的读者和小白们,想了解微信小程序如何开的小白或爱好者们可以学习我们的课程,而微信小程序开发的老鸟可以略过或仅作为参考。

    展开全文
  • 微信小程序开发教程3.zip
  • 微信小程序开发教程1.zip
  • 微信小程序开发教程.zip 1.获取AppID 2.绑定开发者 3.开发者工具(IDE) 4.创建项目 5.IDE 6.编程
  • 微信小程序开发教程.ppt从开发CMS系统学起从入门到精通的微信小程序开发教程学微信小程序开发从实践中学习是开发者最好最快的学习方法。本教程将和大家从零开始一步一步搭建微信小程序CMS系统,每个章节都会涉及到...

    微信小程序开发教程.ppt

    从开发CMS系统学起

    从入门到精通的微信小程序开发教程

    学微信小程序开发

    从实践中学习是开发者最好最快的学习方法。本教程将和大家从零开始

    一步一步搭建微信小程序CMS系统,每个章节都会涉及到不同的知识点,

    等教程学习完你不但掌握了小程序开发全部知识,同时还拥有一个完整作品

    的开发经验! ----weiphp的凡星

    第一章:开始入门

    第一节:课程介绍,定个小目标

    第二节:开发文档简读,了解全貌

    第三节:CMS原型,我们的初期目标

    第四节:微信web开发者工具安装

    第一章:开始入门.课程介绍

    第一节:课程介绍,定个小目标

    第二节:开发文档简读,了解全貌

    第三节:CMS原型,我们的初期目标

    第四节:微信web开发者工具安装

    第一章:开始入门

    第一节:创建项目

    第二节:编写关于我们布局界面

    第三节:用变量替换界面里的固定文本

    第四节:界面美化

    第二章:第一个小程序:关于我们

    第一节:加入文章列表和内容界面

    第二节:为程序加入底部菜单导航

    第三节:实现文章列表界面

    第四节:实现内容详情界面

    第五节:列表和内容界面美化

    第三章:CMS文章列表和内容界面

    第一节:小程序CMS系统下载安装

    第二节:系统整体功能介绍

    第三节:创建一个CMS功能插件

    第四节:创建CMS数据库模型

    第五节:文章内容管理

    第四章:小程序CMS,后端内容管理系统

    第一节:小程序CMS后端接口开放

    第二节:小程序列表界面数据与后端对接

    第三节:小程序内容界面数据与后端对接

    第五章:小程序与后端系统数据对接

    第一节:列表页面加载更多文章

    第二节:界面反馈提示

    其它章节后续补充

    第六章:用户体验提升,让小程序高大上起来

    章节后续补充

    第七章:用户建议反馈,体验表单组件之美

    章节后续补充

    第九章:集成微信开放接口,让功能强大起来

    章节后续补充

    第十章:打包发布,让你的作品与亿万用户见面吧

    章节后续补充

    第八章:本地缓存数据,让加载速度更快

    第二章:第一个小程序:关于我们

    第一节:创建项目

    第二节:编写关于我们布局界面

    第三节:用变量替换界面里的固定文本

    第四节:界面美化

    目录结构,配置,注册程序,注册页面,视图容器,

    数据绑定,wxss

    本章知识点:

    第三章:CMS文章列表和内容界面

    第一节:加入文章列表和内容界面

    第二节:为程序加入底部菜单导航

    第三节:实现文章列表界面

    第四节:实现内容详情界面

    第五节:列表和内容界面美化

    基础内容 导航 媒体组件 列表渲染 模板

    本章知识点:

    第四章:小程序CMS,后端系统

    第一节:小程序CMS系统下载安装

    第二节:系统整体功能介绍

    第三节:创建一个CMS功能插件

    第四节:创建CMS数据库模型

    第五节:文章内容管理

    后端系统

    本章知识点:

    第五章:小程序与后端系统数据对接

    第一节:小程序CMS后端接口开放

    第二节:小程序列表界面数据与后端对接

    第三节:小程序内容界面数据与后端对接

    网络

    本章知识点:

    条件渲染

    事件

    第六章:用户体验提升

    第一节:列表页面加载更多文章

    第二节:界面反馈提示

    第三节:加入加载中的友好提示

    第四节:返回上一页

    设备

    本章知识点:

    界面

    操作反馈

    事件

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,903
精华内容 1,161
关键字:

微信小程序开发教程

微信小程序 订阅