微信小程序开发实战01

Posted songdongdong6

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序开发实战01相关的知识,希望对你有一定的参考价值。

前期准备工作

因为腾讯的要求,每个公众号或着小程序都要绑定唯一的邮箱,所以对我来说是个煎熬呀,公众号,开放平台都注册,实在没邮箱了,只能重新申请了

注册地址:微信小程序注册地址

每个邮箱仅能申请一个小程序

作为登录帐号,请填写未被微信公众平台注册,未被微信开放平台注册,未被个人微信号绑定的邮箱(最坑了)

技术分享图片

自己修改小程序信息,按照积极的需求来写就行

到这里,小程序的注册相关就完成了

技术分享图片

小程序AppID在设置->开发设置,可以看到相关的信息

安装开发者工具包

开发工具现在又两个版本,一个是网页版,一个是下载的工具包

这里就不介绍网页版了

微信开发者工具下载地址:微信开发者工具

技术分享图片

根据自己的需求下载相应的版本

下载完成后直接安装,然后绑定账号就行

界面与操作

自己慢慢熟悉,这个没法写,太杂,随着版本的更新,页面也不是完全相同的

调试功能,比较重要的功能

Console 控制台信息页

????开发者直接再次输入代码并进行调试

????显示小程序的错误输出

Sources 源文件调试信息页,用于显示当前项目的脚本文件

Network 网页调试信息页,用于观察和显示每个元素请求信息和套接字状态等网络相关的详细信息

Storage 数据存储信息页,用于显示当前项目使用储存API接口的数据储存情况

AppData 用于调式显示当前小程序项目此时此刻的应用具体数据,实时的项目数据调整情况

Wxml 用于帮助开发者调试WXML转化后的界面,通过这里的调试可以看到真是的页面结构以及对应的WXSS属性,同时可通过修改对那个的WXSS属性,在模拟器中及时查看修改后的情形

运行小程序

调试预览

手机预览

开发者手机预览

小程序初体验

对于用户而言,小程序的只管表现只是多个互相关联的页面

小程序的目录结构:

根目录下的文件:

App.js 小程序的脚本文件,用来监听并处理小程序的生命周期函数,声明全局变量

App.json 用来对整个小程序的全局配置,配置小程序是由哪些页面组成,配置小程序的窗口背景色等

App.wxss 整个小程序的公共样式表

?

以上是关于微信小程序开发实战01的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序开发实战01

新手从零开始学习微信小程序开发01

小程序·巧应用,微信小程序开发实战

微信小程序开发01:开发环境开发工具配置准备

全球首个实战类微信小程序开发教程

Web前端_微信小程序实战开发