微信小程序学习（一）

这两天在看微信小程序的东东，在此整理一下。

首先标明，个人用户无法申请小程序开发资格。

什么是微信小程序

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序、订阅号、服务号、企业号是并行的体系

能够实现什么

以下是自我总结出来的，如有欠缺，还请指正

实现基本的表单输入提交
酷炫动画展示页的开发，可查看coolsite360 （注：并非推荐其编辑器，暂时也没有做了解，主要是看其实现的作品）
基于H5小游戏的开发，因为微信小程序暴露了原生的重力感应和罗盘等部分原生系统设备接口
在线支付应用开发
等其他应用，尚待探索，欢迎补充

学习资源

官方网站：包括基本接入流程，和”hello world“的入手demo程序
w3cschool：基本copy官网的开发文档，不过看起来感觉比官网要更加流畅一些

感悟总结

IDE

官网中提供小程序编制的IDE，优缺点皆备，总结如下：

优点：较轻量级，但集开发，调试，结构一体化结构，调试工具与Chrome相同，习惯使用Chrome做前端开发的同学上手很快，有一般性的输入提示，界面排版简单明了
缺点：自身存在一些bug，例如代码过长，面板无法横滚等。调试页面的Wxml面板，最开始隐藏在最后，找了半天，才知道是在哪。只有js文件可以实现代码排版格式化，wxml和wxss文件不支持，暂未找到基于项目的全局搜索。比较适合大屏开发，直接在mac上看会感觉比较尴尬

开始项目

如何申请开发资格及基本准备在官方网站描述的很详细，在此不再赘述。

项目结构以功能页面作为结构区分理念

全局文件
pages//单一页面目录的父目录- foo//文件夹- foo.js//实现该页面的功能逻辑文件- foo.wxml//页面展示结构，与H5相似，多了些自有标签- foo.json//单一页面的简单配置，覆盖全局配置- foo.wxss//单一页面的样式表，覆盖全局样式中的同名样式
common//公用文件夹，可包含公用样式，公用逻辑功能代码
app.js//全局逻辑文件
app.json//全局配置文件
app.wxss//全局样式表

在app.js中包含App()函数，进行全局设置，在其他单一页面中使用getApp()获取其引用
在foo.js中使用Page()函数，定义单一页面数据和交互功能

需要注意的事项

在Page函数绑定的数据必须是对象，否则在页面中无法进行绑定
```
//正确
Page({data:{name:'foo'}
})
//错误
Page({data:'foo'
})
```

在进行交互式必须使用setData()方法设置数据的值，进行直接赋值无效

<!--foo.wxml-->
<view bindtap="foo">{{fooValue}}</view>
//foo.js
Page({data:{fooValue:'hello'},foo:function(){//this.data.fooValue = 'test';//❌错误this.setData({//✔️正确fooValue:'test'})}
})

在app.json中设置pages属性，其数据的顺序要和tabBar中list属性中数据的顺序保持一致，否则会报错,如有未在导航栏中的页面，则排列在最后，tarBar中有个数限制，

"pages":["pages/foo1/foo1","pages/foo2/foo2","pages/foo3/foo3","pages/foo4/foo4","pages/foo5/foo5"],"tabBar": {"list": [{"pagePath": "pages/foo1/foo1","text": "foo1"}, {"pagePath": "pages/foo2/foo2","text": "foo2"}, {"pagePath": "pages/foo3/foo3","text": "foo3"}]}

微信小程序提供模板，可以将重复使用的wxml文件写入template中，然后通过is和name属性进行调用，但是要注意的是template的内容要写在当前使用的页面文件中，否则报错

这两天只是简单的了解了一下小程序的开发，写了个todoList，然后就没什么想法了，如果有好的想法，欢迎共享，之后倒有些计划，列表如下

结合H5游戏开发，做个小游戏
结合Canvas开发个类似绘图的东东
使用CSS做个酷炫的展示页

呵呵，再会，祝好

微信小程序学习（一）相关推荐

微信小程序学习Course 8 本地缓存API
微信小程序学习Course 8 本地缓存API 本篇随笔主要介绍微信小程序本地缓存API函数,微信小程序可以在本地缓存一些关键词数据,每一条关键词对应一段字符串.微信小程序提供了以下API函数. 8. ...
微信小程序js数组初始化_微信小程序学习Course 3-2 JS数组对象学习
微信小程序学习Course 3-2 JS数组对象学习本节主要介绍JS中的数组. 3-2.1 数组的声明数组声明的方式多种,如下例.一般我们可以先创建一个空数组,然后再填充. var names = ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序学习（三）：在微信开发者工具中，使用WeUI前端美化框架，微信小程序
微信小程序学习(三):在微信开发者工具中,使用WeUI 这里就是将WeUI导入到微信开发者工具中,我并没有使用多少样式,这里只是展示了一下怎么引用网上有很多的方法,我绝大多数都没看懂,这里就是最简单 ...
微信小程序学习笔记一 + 小程序介绍前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
微信小程序学习：（二）app.js及index.js详解
微信小程序学习:(二)app.js及index.js详解项目地址:https://github.com/leoricding/- 在用ide创建小程序项目时,系统默认为我们创建了一个hellowor ...
2020微信小程序学习报告.2.17-3.1.（三）
微信小程序学习报告应学校课程要求,特此记录首先,小程序知识点: wx.request的使用:发https请求,一个小程序同时只能有5个网络请求,https的参数里,url是接口地址,method是请求 ...
微信小程序学习笔记（一）
干货来袭基础前言微信⼩程序,简称⼩程序,英⽂名 Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤,它实现了应⽤"触⼿可及"的梦想,⽤⼾扫⼀扫或搜⼀下即可打开 ...
微信小程序学习（1）-基础开发
学习微信小程序微信小程序学习(1) 微信小程序学习(2) 文章目录学习微信小程序注册和初始化小程序配置 tabbar导航栏模板插样与WXML 循环渲染条件渲染模板微信小程序脚本WXS ...

微信小程序学习（一）

什么是微信小程序

能够实现什么

学习资源

感悟总结

IDE

开始项目

需要注意的事项

微信小程序学习（一）相关推荐

最新文章

热门文章

微信小程序学习 （一）

什么是微信小程序

能够实现什么

学习资源

感悟总结

IDE

开始项目

需要注意的事项

微信小程序学习 （一）相关推荐

最新文章

热门文章

微信小程序学习（一）

微信小程序学习（一）相关推荐