版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
1、小程序开发入门指南前端篇一、开发前的准备开发环境:微信推出的官方开发工具。申请Appid:相关公司或个人申请到Appid后可以进行真机的调试和预览,否则只能在开发工具里进行调试。备案域名和证书:微信小程序仅支持https协议,所以务必绑定含有证书的域名,才能在正式上线后进行使用。二、项目结构微信小程序底层借鉴了React框架的思想,整个开发围绕着组件化开发和数据绑定的模式进行,与传统的jQuery开发逻辑不同。在开发工具中建立项目,选择quickstart选项,会自动生成项目的框架,并补充部分代码。如图所示,.wxss后缀是样式文件,类似于css,整个文件的书写语法和css一致,.js后缀的是
2、脚本文件,和传统前端开发的js文件作用一样,.json后缀文件是配置文件,页面相关配置的书写都在这个文件中。这些文件在进入小程序之后就会运行,生成小程序实例。下面我们简单学习一下这三个文件的作用。1、app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量、建立一些登录和获取用户信息的全局方法,进行本地数据的读写存储。2、app.json是对整个小程序的全局配置。在这个文件中我们可以注册每个页面,设定小程序窗口的背景颜色和导航文字,设置小程序的tab分页等。3、app.wxss是整个小程序的公共样式表。它是全局的,页面里的元素也都可以直接使用该文件里的样
3、式规则。Pages文件夹里放置着各个页面的文件夹,utils里是一个通用工具类方法文件夹。我们在小程序里看到的每个页面,都是放置在pages文件夹里的。三、页面文件结构例如我们想要写一个充值页面叫做charge,首先要在app.json文件中进行页面的注册,然后就在pages里新建一个叫做charge的文件夹,该文件夹内必须包含四个文件:charge.wxml,charge.wxss,charge.js和charge.json。这四个文件缺一不可,并且一定要保证后缀以外的名字完全一致。.wxml后缀文件是页面的结构,类似于传统前端开发的html文件,.wxss是该页面的样式文件,.js是页面的
4、脚本文件,.json是页面的配置文件。一个简单的.wxml文件代码如下:书写结构和html文件很像,微信小程序只是重新进行了标签的定义,但是在小程序里,每个标签都是一个组件,根据官方文档我们可以快速找到常用组件的标签写法和对应的属性。小程序支持在wxml文件里进行数据绑定,使用“”来完成绑定。对应的数据可以写在js文件中。同时,小程序也支持条件渲染和列表渲染。再来看看js页面的简单结构:在js文件中,我们可以声明绑定的数据,监听处理页面的生命周期函数,定义页面的交互事件,获取小程序实例调用实例方法等。小程序的js文件,内置对象是Page而非浏览器内置的window对象,因此,所有以window
5、对象为基础而写的库或插件都无法在小程序中使用(例如jQuery)。除此以外,小程序里也没有document对象,所有DOM的操作都是基于绑定的数据来进行变化,而不能直接在脚本里进行DOM操作。熟悉Angular,React或者Vue的朋友应该可以很容易理解这种设计。需要注意的是,如果页面无需新的配置项,也必须包含.json文件,并且文件里最少要有一个大括号(如“”),否则会报错。这样我们就处理了一个页面了,每个页面都可以按照这样的方式来开发,但请记住一定要在app.json文件中进行页面的注册,否则是无效的哦。四、与后台通信网络请求是开发中必不可少的环节,微信小程序的网络请求是有一些地方需要注
6、意的。/debug/wxadoc/dev/api/network-request.html#wxrequestobject这是官方的wx.request(OBJECT)网络请求API的文档,代码示例如下首先,微信小程序的请求都是HTTPS请求,其次,content-type默认为application/json,content-type的设置是需要注意的,地址url里不能有端口,还要确保服务器的TLS版本支持1.2及以下。而官方没有指出的是,微信小程序的请求是不自带session的,这一点与传统浏览器的前端开发不同,大家在实际的开发中就会发现这一点,因此,我们也必须使用一些开发技巧来保存相关的session,并在网络请求的时候一并发送给后台。五、手机预览将自己的微信号绑定到小程序对应AppId的开发者当中,就可以实现扫一扫预览。
1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
第6课《个性化网页设计》课件 2024-2025学年岭南美版初中美术九年级下册
2025-2030中国经颅磁刺激仪(TMS)行业市场现状供需分析及投资评估规划分析研究报告
2025-2030中国碳酸镁行业市场发展分析及发展趋势与投资前景研究报告
《飞向太空的航程》课件【中职专用】高一语文(高教版2023基础模块下册)