微信小程序开发

  • 在传统的网页开发中，网页编程采用的是三件套HTML + CSS +JS，其中HTML描述结构，CSS描述样式，JS用来处理这个页面和用户的交互；
  • 在小程序中，wxml充当类似于html的角色，

配置文件

  • pages：存放微信小程序的所有页面
  • .eslintrc.js：格式化代码
  • app.js：微信小程序的入口文件，用于描述微信小程序的整体逻辑
  • app.json：微信小程序的全局配置文件，用于设置页面路径、窗口外观、页面表现、标签栏
  • app.wxss：微信小程序的全局样式文件
  • project.config.json：微信开发者工具上做的任何配置都会写入这个文件中

语法

  • 不需要写后缀名，第一个是默认页面，想要设置分包作为首页可以在app.json添加entryPagePath
1
2
3
4
"pages":[
    "pages/index/index",
    "pages/log/log"
],
  • 页面跳转：将函数写在js文件里，在wxml里使用函数绑定
  • view<hover-class=”bold”>可以翻译成触摸时使用bold样式
  • 想要居中，在view后面写一个样式(样式存放于wxss中)，比如
1
2
3
4
.center-box{
    display: flex;
    justify-content: center;
}
  • 公共样式：其实就是一个公共的css，多个地方
  • flex布局，可以配合文本居中(justify-content)，还有字体大小font-size（在微信小程序中推荐rpx，可以自适应缩放，px是绝对，不好布局）
  • flex-direction可以用column，实现列的样式
  • 分包问题，微信首次加载只加载主包，大小不能超过2mb，主包+分包合起来一共不能超过20mb

    分包 = 延迟加载的页面模块，能有效减小主包体积，让小程序打开更快，更容易上线。

一些感悟

  • 微信开发者工具其实更像是一个写前端界面的东西，可以通过js进行前端界面的一些内容绑定，比如button可以和bindtap绑定，自定义一个函数，点击跳转到xx页面。
  • 这就是前后端联调的开发模式，使用wx.request调取本地端口，然后就可以去查询本地的数据库信息，最后打包上线。
  • 可以通过生命周期函数（onload、onready）等进行埋点的设计（埋点的意思是在关键地方插入代码，来统计用户的行为，比如用户是否点击分享，是否点击转发等）。
  • 通过数据绑定查询后台数据库，就像是淘宝，京东，只是商品变，大布局不变。