小程序项目实例代码(零开始怎么撸小程序)

代码使用:
github下载代码,微信开发者工具中打开即可:
代码链接:https://github.com/MVPVP/xiao...

入门步骤:
学习小程序官方文档:https://mp.weixin.qq.com/debu...

clipboard.png

学习简易教程,下载开发者工具和小程序组件demo体验,结合demo,学习框架组件部分,和过目API,就可以撸代码了;

部分界面演示:

1、欢迎页》登录页》主页:
图片描述

学习:代码结构组织,全部页面路由管理;

2、欢迎回来》手势解锁页》主页:
图片描述

学习:优秀开源组件引入使用;
开源推荐:https://developers.weixin.qq....

3、右滑开锁,密码开锁:
图片描述

学习:弹窗,滑块;

4、其他API的使用:
略;

学习小结:
1、小程序、订阅号及服务号都是在微信公众平台的体系下,但小程序本身与订阅号及服务号是完全独立的,需要重新注册;

2、前端常见的HTML、CSS变成了微信自定义的WXML、WXSS,官方文档中都有明确的使用介绍,上手容易;

3、小程序与H5开发区别:
H5开发:
需要考虑使用开发工具(webstorm,vscode、sublimtext、Atom等),前端框架(Angular、react、vue、backbone等),任务管理工具(Webpack 、Grunt、Gulp等),浏览器兼容性等;
小程序:
开发工具(微信开发者工具),框架(小程序框架),不能直接引入前端框架,没有window变量,但微信提供了wx全局方法集。无法操作DOM,通过改变page data来改变视图展现。数据绑定采用Mustache双大括号语法。事件绑定和条件渲染,全部写在WXML中。

4、小程序的视图层目前使用 WebView 作为渲染载体,而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上,WebView 和 JavascriptCore 都是独立的模块,并不具备数据直接共享的通道。当前,视图层和逻辑层的数据传输,实际上通过两边提供的 evaluateJavascript 所实现;
5、小程序支持原生javascript吗?
JavaScript的三大组成部分——ECMAScript、DOM(文档对象模型,对应document对象)、BOM(浏览器对象模型,对应window对象)。
小程序支持ECMAScript,但不支持document,window对象。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值