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

下载地址👈

目录隐藏

1. 前序

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

5. 关于wxml和wxss

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

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

7. 相关文章：

前序

什么是小程序：微信小程序是腾讯于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呢