微信小程序的开发准备及其调试工具

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_33323480/article/details/84134116

一、微信小程序  微信公众平台    https://mp.weixin.qq.com/cgi-bin/wx

二、下载开发工具  https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

三、安装 运行  申请APPID 创建自己的应用

1、app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。

2、​ app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。
3、app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
三、方法

onLunch()  小程序启动时执行的方法   wx.以这个开头的都是系统封装好的方法 我们都可以直接调用

onLaunch: function () {

// 展示本地存储能力

var logs = wx.getStorageSync('logs') || []

logs.unshift(Date.now())

wx.setStorageSync('logs', logs)

// 登录

wx.login({

success: res => {

// 发送 res.code 到后台换取 openId, sessionKey, unionId

}

})

四、调试工具

1、WXml Panel  WXml转化后的页面(真实的页面结构及结构对应的WXSS属性)

2、Sources Panel (经过处理的脚本文件)

当前项目的脚本文件 同浏览器开发不同,微信小程序框架会对脚本文件进行编译的工作

3、AppDate 具体数据 实施反映项目数据情况编辑数据反馈到界面上

4、Storage   当前项目使用 wx.setStorage

                                            wx.setStorageSync后的数据存储情况

     对数据进行删除 新增 修改
5、network(不支持uploadFile和downloadFile)

      观察和显示request和socket的请求情况

6、consule 输入 调试代码  build preview upload openvendor(打开基础库所在目录) openToolsLog  checkProxy(url) 检查指定url的使用情况

7、sensor 选择模拟的地理位置  模拟移动设备表现 用于调试重力感应api

猜你喜欢

转载自blog.csdn.net/weixin_33323480/article/details/84134116