「前端笔记」从零开始的微信小程序的实战心得

前序

  • 什么是小程序微信小程序是腾讯于2017年1月9日推出的一种不需要下载安装即可在微信平台上使用的应用,主要提供给企业、政府、媒体、其他组织或个人的开发者在微信平台上提供服务。
  • 目的:我学习小程序的目的是为了学app,当时觉得小程序可能比app开发要简单吧
  • 感受:
    • 作为一个后端起步的程序员,本次学习完本套小程序之后切身体会前端是个非常要注意细节的活;
    • 开发语言:
      • 页面的布局:基本类似html,css,可以参考,不过他也有属于他自己的东西(wxml,wxss...)
      • JavaScript:微信小程序的 JavaScript 运行环境即不是 Browser 也不是 Node.js。它运行在微信 App 的上下文中,不能操作 Browser context 下的 DOM,也不能通过 Node.js 相关接口访问操作系统 API。
    • 整体的开发思维我觉得跟后端框架是很相似的,如组件化开发,模型..
    • 代码风格相似python,学过es6,前端框架的同学,那就很舒服了!
    • 找bug是非常难的,需要对小程序开发有一定的经验(太多细节需要注意,甚至有些细节,没有注意,没有报错)
    • 开发好的组件供自己使用或者open是非常有必要的
      !!!!!!
      建议大家在开发小程序的时候,使用git版本控制器和github进行代码托管以便小程序的再开发和保护
      QAQ博主快写完的时候碰到bug项目还neng崩了

开发工具:

  • Visual Studio Code (开发推荐)
  • 微信开发者工具
    • 右键创建components(创建组件推荐)

项目目录解析

  • pages 页面 (根据需求,下面是大致模板)
    • images 页面下的图片
    • page.wxml 骨架
    • page.wxss 样式
    • page.js 业务逻辑
    • page.json 配置
  • components 组件 (根据需求,下面是大致模板)
    • component.wxml 骨架
    • component.wxss 样式
    • component.js 业务逻辑
    • component.json 配置
    • images 存放组件的图片
    • beh.js 行为重复利用可初始化数据
  • images 全局图片
  • models 模型(Api调用的业务逻辑)
  • summary 总结(summary.md必不可少)
  • util 存放全局外部WXS,请求的JS
  • app.js 接入口
  • app.json 窗口配置
  • app.wxss 外部CSS
  • config.js 配置
  • project.config.json 环境配置(['api:url,key','',''])

新建项目 实现第一个pages页面

app.json和app.js的新建是空的 在你创建的时候必须写入初始化的代码,否则创建page页面会报错
page和components的创建可以选择微信开发者工具(会给你生成四个基本文件:wxml,wxss,js,json)
* app.json 采用json花括号格式 {}
* app.js 初始化 App({})

关于创建模板 可能会和微信开发者工具版本有关,版本不同模板也就不同 你可以选择用微信自带模板也可以自己创建

下面是我创建的一个模板

微信自带的(可以根据需求,自己增删)

关于wxml和wxss

wxml和wxss和html和css基本上是非常相似的,在页面布局方面跟网站是差不多,但是它也有属于自己的特性,我就稍微介绍一两个

  • 布局方面尽量选择iphone6大小开发.原因:在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
    不同的屏幕大小不一样rpx=?px不一样,在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。

    • rpx 小程序自身增加的
    • px 不多说了
  • flex 弹性布局
    • flex 相当于一个容器,可以实现子元素的排列布局等,用的好可以大大节省代码,非常好
    • 行内元素也可以使用 display:inline-flex
    • 常用属性:
      • flex-direction 决定元素朝哪个方向排步 row column....
      • flex-wrap 跟换行有关
      • justify-content 对齐方式(横) flex-start,center..
      • align-items 对齐方式(竖)
      • order 排序
    • font-size 到底是用rpx还是用px呢

具体情况具体使用,但大多数情况下,我们的字体使用rpx。最小支持12px,在小也没变化了(QAQ好像会变小啊,难道是版本更新的问题)

晚点在更新,给你们点神秘感~~~

参与评论