最新消息:20210917 已从crifan.com换到crifan.org

【已解决】Mac中开发小程序的基本页面和搞懂基本开发部署预览等逻辑

程序 crifan 566浏览 0评论
折腾:
【记录】Mac中去用小程序实现绘本查询系统的前端
期间,已经在Mac中安装好小程序开发工具,和新建了项目,接着就是去搞懂如何开发了。
本地生成代码是:
点击 小程序模拟页面的右上角的点:
结果出现下面界面:
然后不知道如何取消掉了。
试试点击一个
就回来了:
(【后记】
后来看到:
注册程序 · 小程序
scene
Number
打开小程序的场景值
-》
场景值 · 小程序
才明白上面显示的列表的含义:
就是模拟不同场景下,不同入口,进入小程序时候的效果)
现在回到主页面:
现在接着要:
【已解决】通过码云的git仓库管理微信小程序的项目源码
然后就是去折腾逻辑和开发部署了。
参考:
简易教程 · 小程序
去编译看看
点击预览,显示出二维码:
微信去扫码打开看看效果
点击右上角靠左边一点的 三个点,弹出:
关于null
打开调试
打开性能监控面板
点击右上角的 大圆点,则退出,之后可以下拉后在微信顶部看到:
开发版
另外换用别的手机的微信去扫码,提示:
暂无体验权限
继续参考:
代码构成 · 小程序
关于app.json中的配置参数navigationBarTextStyle
小程序 navigationBarTextStyle
配置 · 小程序
navigationBarTextStyle
String
white
导航栏标题颜色,仅支持 black / white
先去实现导航栏背景色和文字颜色:
效果:
给app.json中加上:
"debug":true
后,即可在console中看到debug信息输出了:
方便调试。
再去看看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输出的:
也加上onLaunch:
App({
    onLaunch: function (options) {
    console.log("onLaunch: options=%o", options)
效果:
后续可以利用上:
小程序调试 · 小程序
https://developers.weixin.qq.com/miniprogram/dev/devtools/debug.html#自定义数据上报
自定义分析 · 小程序
去实现:统计用户点击的行为
大概看了很多介绍,可以开始去折腾页面了:
【未解决】微信小程序开发工具中去画界面实现首页布局
代码构成 · 小程序
https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html#wxml-模板
API · 小程序
目录结构 · 小程序
文件结构
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:
文件
必需
作用
小程序逻辑
小程序公共配置
小程序公共样式表
一个小程序页面由四个文件组成,分别是:
文件类型
必需
作用
页面逻辑
页面结构
json
页面配置
页面样式表

转载请注明:在路上 » 【已解决】Mac中开发小程序的基本页面和搞懂基本开发部署预览等逻辑

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
86 queries in 0.210 seconds, using 20.26MB memory