程序小程序开发工具

粉笔IT微信小程序授课教师:马丹2018年7月30日粉笔IT·官方微信1微信小程序day01初识小程序简介微信小程序是微信与2017年1月份推出的,它是依托于微信平台的一个微信应用;主要作用是用于推广宣传,开发功能应用;与此同期推出的,还有微信小游戏,用于开发微信上的小游戏.
小程序、公众号、APP微信公众号采用的是h5技术小程序是用微信自己研发的编辑语言APP:Android、iOS语言小程序的功能性更类似于APP,但是无需安装,随用随走申请小程序https://mp.
weixin.
qq.
com/1.
注册2.
填写账号信息—邮箱激活---信息登记23.
登录小程序4.
下载小程序开发工具5.
查看文档6.
文档介绍37.
进入开发文档第一个小程序1.
安装开发者工具2.
APPid是开发小程序进行真机测试必须有的一组序列号,作用就是用于小程序的上传进行真机测试;43.
创建项目4.
介绍目录小程序每个项目都需要新建一个项目进行管理;项目:pages文件夹和三个主文件:app.
js,app.
json,app.
wxsspages文件夹---存放小程序页面;app.
js---设置全局的函数,变量,数据;5app.
json---微信的界面全局设置;包括页面注册,界面设置;页面注册指的是所有在小程序出现的页面都需要在这个json文件中进行登记;app.
wxss---小程序的全局样式;微信小程序页面:一个微信小程序页面是一个文件夹,内部最多有4个文件,组成了一个小程序页面:index.
js,index.
wxml,index.
json,index,wxss,其中,只有wxml和js文件是必须的;小程序开发内容组成框架----组件----API框架:核心是一个响应的数据绑定系统,包括视图层(View)和逻辑层(AppService)组件与属性:类比HTML标签;微信提供了七大类组件API:调用微信提供的能力,如获取用户信息,本地存储,支付功能等.
小程序中的常用组件组件:组件是视图层的基本组成单元.
组件自带一些功能与微信风格的样式.
一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内.
Contentgoeshere.
.
.
6view说明:view是块级组件,用法和功能与div类似view体验/**index.
wxss**/view{width:200rpx;height:100rpx;background-color:red;}view体验view体验尺寸单位在微信小程序开发中,尺寸单位使用rpx(responsivepixel),表示响应式单位,可以根据屏幕宽度进行自适应;开发小程序页面建议采用iphone6视觉稿作为参考标准;在iphone6标准下:1px=2rpx;7组件属性的使用view体验view体验texttext体验text体验8说明:text是行内组件,与span类似.
imageNavigator导航(超链接)9.
navigator-hover{color:blue;}Buttonpickme滑块视图容器快速建立滑块视图容器滑块组件也叫焦点图或轮播图使用:1.
直接复制文档中提供的代码——wxml和js代码;2.
修改swiper的配置需要在组件上添加组件属性,然后在js中赋值;10indicator-dotsautoplayintervalduration//index.
js//获取应用实例constapp=getApp()Page({data:{imgUrls:['http://img02.
tooopen.
com/images/20150928/tooopen_sy_143912755726.
jpg','http://img06.
tooopen.
com/images/20160818/tooopen_sy_175866434296.
jpg','http://img06.
tooopen.
com/images/20160818/tooopen_sy_175833047715.
jpg'],indicatorDots:false,autoplay:false,interval:5000,duration:1000},changeIndicatorDots:function(e){this.
setData({indicatorDots:!
this.
data.
indicatorDots})},changeAutoplay:function(e){this.
setData({autoplay:!
this.
data.
autoplay})},intervalChange:function(e){11this.
setData({interval:e.
detail.
value})},durationChange:function(e){this.
setData({duration:e.
detail.
value})}})Mustache语法在微信小程序中,数据的处理原理是通过逻辑层驱动视图层,也就是结构页面的内容是通过js来处理的.
在结构页面引用数据的语法称之为mustache语法:{{name}}特点是双大括号;在结构页面通过这个语法定义变量,在js文件的data对象中进行变量赋值;注意:12大括号和引号之间不能有空格不要直接写checked="false",其计算结果是一个字符串属性的多种写法autoplay='true'错误的正确的:autoplay={{true}}autoplayautoplay={{autoplay}}js:data{autoplay:true}