成都网站建设,成都建站,成都网站制作,成都网站优化
小程序
> 小程序 >
小程序开发教程
发表于 2019-02-21 浏览:
文章导读:2018年是小 程序开始大火的一年。众多的 小程序入雨后春笋般破图而出,作为开 发者怎么开发一个小程序呢。让我们开始吧,lets do it。 账号申请 小程序开发入门教程 注册一个小程序来...
2018年是小 程序开始大火的一年。众多的 小程序入雨后春笋般破图而出,作为开 发者怎么开发一个小程序呢。让我们开始吧,let's do it。
账号申请
小程序开发入门教程
小程序开发入门教程
注册一 个小程序来管理拥有权限
注册账 号跟密码管理拥有权限
2:登录微 信公众平台获得AppID(小程序ID)
小程序开发入门教程
小程序开发入门教程
登录微信公众平台
3:找到设置->开发设置
小程序开发入门教程
小程序开发入门教程
获取自己的AppID
4:下载开发者工具,然后输入自己的AppId
小程序开发入门教程
小程序开发入门教程
输入自己的AppID开始创建项目
5:自动打 开微信开发者工具平台
小程序开发入门教程
小程序开发入门教程
微信开发者工具
这样就 可以进行小程序的开发了。
你以为 这样就结束了吗?没有撒,还不够...
分析项 目结构和各个文件的含义
首先来 开一下目录结构
小程序开发入门教程
小程序开发入门教程
demo目录结
文件后缀的含义
a .json 后缀的 JSON 配置文件(没什么好说的,就是普通的json文件)
b .wxml 后缀的 WXML 模板文件(类Html文件)
c .wxss 后缀的 WXSS 样式文件(类CSS文件)
d .js 后缀的 JS 脚本逻辑文件(没什么好说的,就是普通的js)
但是重点来了
app.js
小程序开发入门教程
小程序开发入门教程
监听并 处理小程序的生命周期函数、声明全局变量
代码中定义了一个App对象,该对象包含onLaunch方法和globalData成员变量 ,其中onLaunch方法会 在程序启动时由框架来进行调用。在该方法中,程序通 过微信提供的本地存储接口获取了一个logs变量,第一次 获取时会返回空,这时将 变量初始化为空数组,之后在 数组头部添加一个格式化的时间字符串,最后将 数组变量存储在本地。login和getSetting方法很容易理解,会执行 获取用户信息的功能。代码最后定义了 globalData成员变量,该成员包含userInfo变量,用来保存用户信息。
app.json
小程序开发入门教程
小程序开发入门教程
全局路径,界面表现、网络超时时间、底部 tab等等配置
app.json是对当 前小程序的全局配置,包括了 小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。tabBar就是我自己添加的。pages是用于 描述当前小程序所有页面路径。window是小程 序所有页面的顶部背景颜色,文字颜 色定义在这里的。
app.wxcss
小程序开发入门教程
小程序开发入门教程
全局css样式
这个不 用说肯定是定义的一个全局css文件,就略过了
project.config.json
小程序开发入门教程
小程序开发入门教程
项目配置
通常大 家在使用一个工具的时候,都会针 对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换 了另外一台电脑重新安装工具的时候,你还要重新配置。考虑到这点,小程序 开发者工具在每个项目的根目录都会生成一个 project.config.json,你在工 具上做的任何配置都会写入到这个文件,当你重 新安装工具或者换电脑工作时,你只要 载入同一个项目的代码包,开发者 工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会 包括编辑器的颜色、代码上 传时自动压缩等等一系列选项。(官方)
下面说一说这个pages这个东西
小程序开发入门教程
小程序开发入门教程
可以看 到下面有两个文件夹,每个文 件夹里面都有与文件夹名称一样的几个文件,这里面的定几个js,json,wxml,wxss只是针 对此文件夹里面的文件有效果。index里面也可以写一个json文件用 来展现界面表现等,但是名称必须是idex.json。下面说一说wxml这个东西,就结束了吧。
WXML 模板
小程序开发入门教程
小程序开发入门教程
和 HTML 非常相似,有标签、属性等等构成,总结起来有两点
1。标签名字有点不一样 往往写 HTML 的时候,经常会用到的标签是 div, p, span,开发者 在写一个页面的时候可以根据这些基础的标签组合出不一样的组件,例如日历、弹窗等等。换个思路,既然大 家都需要这些组件,为什么 我们不能把这些常用的组件包装起来,大大提 高我们的开发效率。 从上边 的例子可以看到,小程序的 WXML 用的标签是 view, button, text 等等,这些标 签就是小程序给开发者包装好的基本能力,我们还提供了地图、视频、音频等等组件能力,更多详 细的组件请参考API
2。多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式 在网页 的一般开发流程中,我们通常会通过 JS 操作 DOM ,以引起 界面的一些变化响应用户的行为。例如,用户点 击某个按钮的时候,JS 会记录一些状态到 JS 变量里边,同时通过 DOM API 操控 DOM 的属性或者行为,进而引 起界面一些变化。当项目 越来越大的时候,你的代 码会充斥着非常多的界面交互逻辑和程序的各种状态变量,显然这 不是一个很好的开发模式,因此就有了 MVVM 的开发模式(例如 React, Vue),提倡把 渲染和逻辑分离。简单来 说就是不要再让 JS 直接操控 DOM,JS只需要管理状态即可,然后再 通过一种模板语法来描述状态和界面结构的关系即可。 小程序 的框架也是用到了这个思路,如果你需要把一个 Hello World 的字符 串显示在界面上, WXML 是这么写 :
小程序开发入门教程
小程序开发入门教程
JS 只需要管理状态即可,可以这样写
小程序开发入门教程
小程序开发入门教程
通过 {{ }} 的语法 把一个变量绑定到界面上,我们称为数据绑定。仅仅通 过数据绑定还不够完整的描述状态和界面的关系,还需要 if/else, for等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达。
好了,就整理这么多吧。我想不管是什么技术,只要是很火的,作为程 序员都有必要是了解一下,因为你 的本质工作就写代码,不论是前端还是后端,也千万 当自己懈怠的时候为自己打Call。
返回上一页
上一篇:小程序开发官方教程
下一篇:免费个 人怎么做微信小程序

最新文章
随机文章
快速申请办理
称呼: *
电话: *

订单提交后,10分钟内,我们将 安排工作人员和您联系!

热点资讯
联系我们

成都市网创广告公司
联系人:罗经理
热线:15196689610
QQ:1052715722
地址:四川省 成都市青羊区锣锅巷31号