微 信小程序开发| “朝闻道”知识分享大赛

[Thomas Wade]

这是我参加朝闻道知识分享大赛的100 篇文章

 第一个微信小程序

新建项目               

双击微信开发者工具图标，管理员或开发者使用微信扫码二维码后进入菜单画面。单击菜单中的“小程序项目”选项进入小程序项目管理页面。

 其中AppID必须填实际的小程序ID，否则部分功能将无法使用。 如果开发者暂时条件受限无法注册申请小程序ID，可以选择AppID输入框下方的体验小程序，此时也可以在开发者工具进行开发，但无法真机预览。

 其中小程序的AppID可以登录微信公众平台（https://mp.weixin.qq.com）查看。具体查看步骤是：左侧菜单“开发”下的“开发管理”选项—“开发设置”面板—“开发者ID”标题下方的AppID（小程序ID）。

 

初学者建议在“模板选择”选项选择“全部来源”→“基础”类别里面的“JavaScript 基础模板”，如果项目目录是一个空白文件夹，则该选项会自动生成代码形成一个简单的小程序项目结构供初学者入门学习。

 

填写完毕后单击“确定”按钮完成操作，此时会跳转到开发页面。该图中左边就是手机预览效果图，可见目前能够显示出当前用户的头像图片、微信昵称以及一个“Hello World”文本，这与手机运行的效果完全相同。

 

如果想体验一下点击按钮再获取用户个人信息的效果，可以找到pages/index/index.js文件，将其中的第12行代码改为canIUseOpenData: false即可。（注：由于官方不定期会更新初始默认模板代码，这里的行号仅供参考以实际找到的为准。）

此时重新编译（顶部工具栏中有“编译”按钮或直接快捷键Ctrl+S）就可以看到未登录前的画面。用户可以直接在PC端用鼠标单击模拟手指在手机屏幕上触摸的效果

 真机预览/调试

1. 真机预览 除了直接在PC端使用鼠标模拟手机触屏的点击效果外，还可以直接在真机上进行程序预览。单击“预览”按钮，即可自动生成一个预览专用二维码。 用手机微信扫描上图中的二维码即可进行真机测试。

 1. 真机预览 由图可见画面效果基本和PC端的预览图一致。需要注意预览所用的二维码不是永久有效，要注意它的过期时间。一旦过期需要重新单击“预览”按钮生成新的预览二维码。

2. 真机调试 真机预览只能看到小程序页面效果，如果在测试过程中需要像PC端一样获得小程序的状态数据（例如console语句输出、本地缓存数据变化、网络抓包等）需要进行真机调试。 单击“远程调试”按钮，即可自动生成一个调试专用二维码。同样用手机微信扫描上图中的二维码即可进行真机远程调试。

手机调试画面会比真机预览多出来一个浮窗，该浮窗会显示与PC端的通讯状态。 在调试过程中手机端的任何操作都可以在PC端调试器中同步进行实时查看。