释放双眼,带上耳机,听听看~!
什么是小程序:微信小程序是腾讯于2017年1月9日推出的一种不需要下载安装即可在微信平台上使用的应用,主要提供给企业、政府、媒体、其他组织或个人的开发者在微信平台上提供服务。
目的:我学习小程序的目的是为了学app,当时觉得小程序可能比app开发要简单吧
前序
- 什么是小程序:微信小程序是腾讯于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(创建组件推荐)
项目目录解析
- 右键创建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好像会变小啊,难道是版本更新的问题)
晚点在更新,给你们点神秘感~~~
声明:本文为原创作品,版权归作者所有。未经许可,不得转载或用于任何商业用途。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
加油