折腾:
【记录】Mac中去用小程序实现绘本查询系统的前端
期间,已经在Mac中安装好小程序开发工具,和新建了项目,接着就是去搞懂如何开发了。
本地生成代码是:
![](https://www.crifan.com/files/pic/uploads/2021/04/ecb52433bb8b4b6f979ad6f62fc4aeb8.jpg)
点击 小程序模拟页面的右上角的点:
![](https://www.crifan.com/files/pic/uploads/2021/04/64f3651c8d194933924f1c50f25f3745.jpg)
结果出现下面界面:
![](https://www.crifan.com/files/pic/uploads/2021/04/ec4417a95a7b449e8222d41b1ddcdbe5.jpg)
然后不知道如何取消掉了。
试试点击一个
![](https://www.crifan.com/files/pic/uploads/2021/04/63a58a9df1f644d4a3377c8b5c5022d3.jpg)
就回来了:
![](https://www.crifan.com/files/pic/uploads/2021/04/ed9676b95bf94e91b0f200d6824b5863.jpg)
(【后记】
后来看到:
scene | Number | 打开小程序的场景值 |
-》
才明白上面显示的列表的含义:
就是模拟不同场景下,不同入口,进入小程序时候的效果)
现在回到主页面:
![](https://www.crifan.com/files/pic/uploads/2021/04/3e999d3f4d2f47c8b049ff3abca4e0be.jpg)
现在接着要:
【已解决】通过码云的git仓库管理微信小程序的项目源码
然后就是去折腾逻辑和开发部署了。
参考:
去编译看看
点击预览,显示出二维码:
![](https://www.crifan.com/files/pic/uploads/2021/04/ed41ad50dd344446ab5fb70ab0c89e9f.jpg)
![](https://www.crifan.com/files/pic/uploads/2021/04/b05ed15304634fa1a9cf78398564345d.jpg)
微信去扫码打开看看效果
![](https://www.crifan.com/files/pic/uploads/2021/04/35064076af7946b49c35e7a072d41d4c.jpg)
点击右上角靠左边一点的 三个点,弹出:
![](https://www.crifan.com/files/pic/uploads/2021/04/3da68f040c5c42eb9a67c9fcfa5bd1d0.jpg)
关于null
打开调试
打开性能监控面板
点击右上角的 大圆点,则退出,之后可以下拉后在微信顶部看到:
开发版
![](https://www.crifan.com/files/pic/uploads/2021/04/b2e3d03a11994e53b197e3531b1c5ddf.jpg)
另外换用别的手机的微信去扫码,提示:
暂无体验权限
![](https://www.crifan.com/files/pic/uploads/2021/04/8ac5735991204741b279e9e0a1153bb5.jpg)
继续参考:
关于app.json中的配置参数navigationBarTextStyle
小程序 navigationBarTextStyle
navigationBarTextStyle
String
white
导航栏标题颜色,仅支持 black / white
先去实现导航栏背景色和文字颜色:
![](https://www.crifan.com/files/pic/uploads/2021/04/806d4466431e46e884248416dbd39c9b.jpg)
效果:
![](https://www.crifan.com/files/pic/uploads/2021/04/d12a987f258a4a1ca7dbd15fe8f88f3b.jpg)
给app.json中加上:
"debug":true
后,即可在console中看到debug信息输出了:
![](https://www.crifan.com/files/pic/uploads/2021/04/526bbcd657b04513a464599dc276ba05.jpg)
方便调试。
再去看看project.config.json:
然后接着先看看功能和逻辑介绍:
之后再去开始画页面
给App()中加上:
onShow: function (options) { // Do something when show. console.log("onShow: options=%o", options) }, onHide: function () { // Do something when hide. console.log("onHide") }, onError: function (msg) { console.error("onError: msg=%o", msg) },
效果:
隐藏后再显示是可以看到对应的log输出的:
![](https://www.crifan.com/files/pic/uploads/2021/04/83567b3bc4fe4dcbab20f9cc4c05d556.jpg)
也加上onLaunch:
App({ onLaunch: function (options) { console.log("onLaunch: options=%o", options)
效果:
![](https://www.crifan.com/files/pic/uploads/2021/04/0f2ee95e82bd43d59a89d0e897d1416c.jpg)
后续可以利用上:
小程序调试 · 小程序
去实现:统计用户点击的行为
大概看了很多介绍,可以开始去折腾页面了:
【未解决】微信小程序开发工具中去画界面实现首页布局
代码构成 · 小程序
- 模板==WXML==HTML
- 标签名字有点不一样
- div, p, span -》 view, button, text
- 支持数据绑定
- wx:if
- {{ }}
- 样式==WXSS=CSS
- 新增了尺寸单位:rpx
- 全局的样式和局部样式
- 仅支持部分 CSS 选择器
- 交互逻辑==JS
文件结构
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:
文件 | 必需 | 作用 |
是 | 小程序逻辑 | |
是 | 小程序公共配置 | |
否 | 小程序公共样式表 |
一个小程序页面由四个文件组成,分别是:
文件类型 | 必需 | 作用 |
是 | 页面逻辑 | |
是 | 页面结构 | |
json | 否 | 页面配置 |
否 | 页面样式表 |
转载请注明:在路上 » 【已解决】Mac中开发小程序的基本页面和搞懂基本开发部署预览等逻辑