新手入门选修教程：小程序的框架及逻辑层_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
新手入门选修教程：小程序的框架及逻辑层
&&微信小程序文档教程,200份文档和源码, 有需要可以私聊我
阅读已结束，下载文档到电脑
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩15页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢只需一步，快速开始
扫一扫，登录网站
后使用快捷导航没有帐号？
微信小程序项目总结《六》项目结束和补充总结
在完成小程序的途中，学习到了很多新的知识，对js的认识和熟练也加深了
作者：Tong_T，来自你可以在这里获取相关视频：&作者没有分享源码，你可以学习这个类似的demo：1.小程序的生命周期——App.jsApp() 必须在 app.js 中注册，且不能注册多个。所以App（）方法在一个小程序中有且仅有一个。App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。注意：(1).不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。(2).不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 还没有生成。(3).通过 getApp() 获取实例之后，不要私自调用生命周期函数。2.页面的生命周期Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。生命周期函数onLoad: 页面加载&一个页面只会调用一次。&接收页面参数 可以获取wx.navigateTo和wx.redirectTo及&navigator/&中的 query。onShow: 页面显示&每次打开页面都会调用一次。onReady: 页面初次渲染完成&一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。onHide: 页面隐藏&当navigateTo或底部tab切换时调用。onUnload: 页面卸载&当redirectTo或navigateBack的时候调用。3.深入浅出ES6：ES6是什么ECMAScript发生了什么变化？编程语言JavaScript是ECMAScript的实现和扩展，由ECMA（一个类似W3C的标准组织）参与进行标准化。ECMAScript定义了：&语言语法 – 语法解析规则、关键字、语句、声明、运算符等。&类型 – 布尔型、数字、字符串、对象等。&原型和继承&内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。&ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的Web API，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似Node.js的非浏览器环境。新标准上周，ECMAScript语言规范第6版最终草案提请Ecma大会审查，这意味着什么呢？&这意味着在今年夏天，我们将迎来最新的JavaScript核心语言标准。&这无疑是一则重磅新闻。早在2009年，上一版ES5刚刚发布，自那时起，ES标准委员会一直在紧锣密鼓地筹备新的JS语言标准——ES6。&ES6是一次重大的版本升级，与此同时，由于ES6秉承着最大化兼容已有代码的设计理念，你过去编写的JS代码将继续正常运行。事实上，许多浏览器已经支持部分ES6特性，并将继续努力实现其余特性。这意味着，在一些已经实现部分特性的浏览器中，你的JS代码已经可以正常运行。如果到目前为止你尚未遇到任何兼容性问题，那么你很有可能将不会遇到这些问题，浏览器正飞速实现各种新特性。版本号6ECMAScript标准的历史版本分别是1、2、3、5。&那么为什么没有第4版？其实，在过去确实曾计划发布提出巨量新特性的第4版，但最终却因想法太过激进而惨遭废除（这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统）。&ES4饱受争议，当标准委员会最终停止开发ES4时，其成员同意发布一个相对谦和的ES5版本，随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为“Harmony”，因此，ES5规范中包含这样两句话：&ECMAScript是一门充满活力的语言，并在不断进化中。&未来版本的规范中将持续进行重要的技术改进。&这一声明许下了一个未来的承诺。兑现承诺2009年发布的改进版本ES5，引入了Object.create()、Object.defineProperty()、getters和setters、严格模式以及JSON对象。我已经使用过所有这些新特性，并且我非常喜欢ES5做出的改进。但事实上，这些改进并没有深入影响我编写JS代码的方式，对我来说最大的革新大概就是新的数组方法：.map()、. filter()这些。&但是，ES6并非如此！经过持续几年的磨砺，它已成为JS有史以来最实质的升级，新的语言和库特性就像无主之宝，等待有识之士的发掘。新的语言特性涵盖范围甚广，小到受欢迎的语法糖，例如箭头函数（arrow functions）和简单的字符串插值（string interpolation），大到烧脑的新概念，例如代理（proxies）和生成器（generators）。&ES6将彻底改变你编写JS代码的方式！4.到这里这个项目的开发就告一段落了，我让我的朋友们体验了一下这个小程序初版，大家反响还挺好，测试工程师阿姣给出了中肯的测试建议：在完成小程序的途中，学习到了很多新的知识，对js的认识和熟练也加深了，最后，感谢朋友们的帮助，接下来会完成新的小程序的开发，尽请期待！微信小程序前端源码逻辑和工作流
看完微信小程序的前端代码真的让我热血沸腾啊，代码逻辑和设计一目了然，没有多余的东西，真的是大道至简。
废话不多说，直接分析前端代码。
先看入口app.js，app(obj)注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。其他文件可以通过全局方法getApp()获取app实例，进而直接调用它的属性或方法，例如（getApp().globalData）
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
globalData:{
userInfo:null
我理解app.js为入口初始化文件，也是提供全局API拓展的地方。下边分析下自带的几个方法和属性
onLaunch钩子函数会在小程序初始化完成后会自动执行一次，然后在小程序生命周期里如果你不主动调用onLaunch，它就不会在执行。
var logs = wx.getStorageSync('logs') || []获取本地缓存中的logs属性，如果值为空，那么设置logs=[] 与HTML5中的localStorage作用相似logs.unshift(Date.now()) 当前登录时间添加到数组中wx.setStorageSync('logs', logs) 将数据存入本地缓存，因为wx为全局对象，所以可以在其他文件中直接调用wx.getStorageSync('logs')获取本地缓存数据
getUserInfo函数，顾名思义就是获取登录用户信息，相当于此函数提供了获取用户信息的接口，其他页面不调用自然不会执行。其他页面通过getApp().getUserInfo(function(userinfo){console.log(userinfo);})这种方式调用该方法，获取用户信息。
getUserInfo:function(cb){//参数为cb,类型为函数
var that = this
if(this.globalData.userInfo){//用户信息不为空
typeof cb == "function" && cb(this.globalData.userInfo)//如果参数cb的类型为函数，那么执行cb,获取用户信息；
}else{//如果用户信息为空，也就是说第一次调用getUserInfo，会调用用户登录接口。
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {console.log(res)
that.globalData.userInfo = res.userInfo//把用户信息赋给globalData，如果再次调用getUserInfo函数的时候，不需要调用登录接口
typeof cb == "function" && cb(that.globalData.userInfo)//如果参数cb类型为函数，执行cb,获取用户信息
&globalData对象用来存储全局数据，在其他地方调用
然后简要分析下app.json文件，对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等、
最重要的是pages属性，必填，为数组，数组内的元素为字符串性文件路径，指定小程序由哪些页面组成，第一项必须是小程序初始页面。
"pages/index/index",
"pages/logs/logs"
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
app.wxss为全局样式表，作用于每个页面。
然后来看下项目index和logs文件。微信小程序初始项目把每个页面相关的js、wxss、wxml放在各自的文件，这样看起来结构清晰明朗很多。
先来看index文件夹，即小程序初始页面。index文件夹下为index.js、index.wxml、index.wxss三个小文件。小程序把js、css、html代码分离开来，放在独自的文件里，各司其职。js和样式表文件名必须与当前文件夹的wxml文件名保持一致，这样才能保证js和样式表的效果能够在页面中显现出来。我很欣赏这样的设计理念，整齐划一，职责明确，减轻代码设计复杂度。
index.wxml，这就是常见的模板文件，数据驱动，有过前端mvc、mvvm项目开发的对这个一定不会陌生，毕竟这是基于react开发的
&!--index.wxml--&
&view class="container"&
bindtap="bindViewTap" class="userinfo"&
&image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"&&/image&
&text class="userinfo-nickname"&{{userInfo.nickName}}&/text&
&view class="usermotto"&
&text class="user-motto"&{{motto}}&/text&
分析下每行代码
&view class="container"&//view视图容器
bindtap="bindViewTap" class="userinfo"&//bindtap作用为这个容器绑定一个触摸点击事件，手指触摸后离开时触发bindViewTap方法，该方法指向于index.js中的同名函数
&image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"&&/image&//双大括号的变量通过index.js的data对象解析对应的属性值，且是实时的
&text class="userinfo-nickname"&{{userInfo.nickName}}&/text&
&view class="usermotto"&
&text class="user-motto"&{{motto}}&/text&
&/view&index.js结构，与reaact用法几无二异，换汤不换药。page()来注册一个页面。接受一个 OBJECT 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。
var app = getApp() // 获取入口文件app的应用实例
motto: 'Hello World',
userInfo: {}
//自定义事件处理函数，点击.userinfo的容易触发此函数
bindViewTap: function() {
wx.navigateTo({//全局对象wx的跳转页面方法
url: '../logs/logs'
onLoad: function () {//发生页面加载时，自动触发该生命周期函数
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据，页面自动渲染
that.setData({
userInfo:userInfo
index.wxss文件只渲染当前所属页面，会覆盖全局app.wxss同一样式。
&在分析下logs日志文件夹
logs文件夹下为logs.wxml、logs.js、logs.wxss、logs.json，同理保证同名，才能完成效果渲染。
&logs.wxml文件
&!--logs.wxml--&
&view class="container log-list"&
&block wx:for="{{logs}}" wx:for-item="log"&//block容器作用，无其他实际含义。wx:for作用：遍历logs数组，遍历多少次，block块就会复制多少次，for-item等同于为遍历元素起一个变量名，方便引用。&text class="log-item"&{{index + 1}}. {{log}}&/text&
logs.js 文件
var util = require('../../utils/util.js') //util.js相当于一个函数库，我们可以在这个文件内自定义扩展和封装一些常用的函数和方法
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(function (log) {//通过wx.getStorageSync获取本地缓存的logs日志数据
return util.formatTime(new Date(log))//日期格式化
logs.json文件
"navigationBarTitleText": "查看启动日志"
//当前页面配置文件，设置window当前页面顶部导航栏标题等相关内容
基本页面结构和逻辑就这么简单，暴露给我们的没有一点令人费解的东西。
小程序还提供了很多官方组件和API等待我们深挖，加油吧，少年！地址
今天思考下前端源码安全的东西(不是前端安全,只是针对于源码部分).在我看来,源码安全有两点,一是防止抄袭,二是防止被攻破.实际上讲,前端的代码大多是没有什么可抄袭性,安全更是形同虚设的(任何前端输入都是不能相信的).但如果还是想防止源码被查看,HTML.CSS并不能做什么,最终都会用露出来(最简单用Chrome开发者工具就可以看到),所以只能针对JS做文件的 ...
在linux下的很多软件都是通过源码包方式发布的,这样做对于最终用户而言,虽然相对于二进制软件包,配置和编译起来繁琐点,但是它的可移植性却好得多,针对不同的体系结构,软件开发者往往仅需发布同一份源码包,不同的最终用户经过编译就可以正确运行,这也是非常符合c语言的设计哲学的,一次编写,到处编译么,而常见的二进制包,比如rpm和deb,软件开发者必须为每种特定的 ...
前段时间在教课时突发奇想的一个小例子,国庆有时间完善了一下,拿出来和大家分享:)非常简单的几个控件,实现了一个坦克移动,并打出子弹的小游戏.希望能给大家带来一点乐趣和知识.注:本程序离真正的游戏差的很远,只用来让初学者对一些控件及线程更加深入的理解和应用才实现的.所用控件及类:Button,Label,ImageList,contextMenuStrip, ...
俗话说隔行如隔山,感觉上是一回事,自己动手又是另一回事.这两天回家就帮亲戚家孩子做外挂,本以为很简单,结果泡广海逛看雪的,研究了三个半晚上才在今天接近凌晨时大体弄好.万幸自己一直在混软件这碗饭,并没真正的隔行,最多是&一座山上两座峰,搭个吊桥就能通&罢了.
前两天博文中提过一次,这次帮亲戚做外挂为了省事没做封包的(事实上没写过外挂,也不 ...
先说个好消息吧,我号就要订婚啦~~总算脱离程序员光棍生涯~~不得不说这个网站给了我很大的帮助!所以,我就想把这份源码也园子里的广大朋友们,希望在你们的爱情之路上,能发挥一点点的能量,我足矣~ 先祝大家 情人节快乐~~咱们程序员也很浪漫的~哈哈.. 一.申明 申明一.此网站的很多内容都不是本人独创,剽窃了很多的网上前辈的源码,但是我木有用在商 ...
九宫格小游戏,可从本地图库载入一张图片,填充到9个ImageView,另涉及Timer计时.图库控件.每个格子都是相同的控件,动态添加到首页中的,在初始化后,响应touch事件,之后通过多次消息传递,来完成整个拼图过程.里面有个随机发牌的经典算法,也可参考.初始化时,激发每个格子的init事件和initCheckOk来完成布局=&单个控件响应 touc ...
© CopyRight
Inc All Rights Reserved.
管理员邮箱: info @标签：至少1个，最多5个
mini-program
勘探-微信小程序
注册小程序账号
--流程简单，不赘述.
在网站的“设置”-“开发者设置”中,得到AppId
下载开发者工具
通过开发者工具创建小程序
小程序有全局的配置、样式、逻辑也有每个页面自己的配置、样式、逻辑文件
app.json: 全局配置--(小程序公共设置)
app.js: 全局配置--(小程序逻辑)
app.wxss: 全局配置--(小程序公共样式)
pages: 页面数组--(小程序可单独有自己的配置、样式、逻辑文件，还有一个页面结构文件)
配置部分注意项~
配置部分相对简单，So 只列出如下注意点，顺带附上个人配置：
为了方便开发者减少配置项，我们规定描述页面的这四个文件必须具有相同的路径与文件名。
每增加一个页面，必须在全局app.json文件pages参数下增加对应路径配置！
如果有菜单项，强制要求控制在2-5个！
如果配置菜单必须把小程序初始页面配成菜单list其中一个，否则无法显示菜单！！
1. 小程序生命周期函数&br/&2. 自定义函数&br/&3. 数据
1.其中自定义函数和数据为全局的&br/& 2.本文件内通过this调用自定义函数和数据，其他文件需要getApp()或者实例后调用
pages下的页面内
1. 初始数据&br/&2.页面生命周期函数&br/&3.自定义函数&br/&4.数据
1. Page.prototype.route可以获取当前路由路径&br/&2.Page.prototype.setData()可更改数据，并相应到视图层，&br/&直接修改this.data不会更新到页面，且单次设置数据不能超过1024kb。
1.module.exports(推荐) 2.exports
1. 文件具有单独作用域&br/&2.可以抽离公共代码module.exports 或者 exports对外暴露接口&br/&3.不支持绝对路径以及node_modules
在小程序中所有页面的路由全部由框架进行管理。
自行查看文档
自行查看文档
有兴趣的话可以自行去了解一下 【前台、后台定义】以及【销毁小程序的时机】
老规矩，剩下的列出需要注意的点：
App() 必须在 app.js 中注册，且不能注册多个。
不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。&
通过 getApp() 获取实例之后，不要私自调用生命周期函数。
1. 用于data对象下存在的字段 出现的位置 &br/& 2. 支持简单计算及组合
1. 关键字(需要在双引号之内) &br/& 2. 花括号和引号之间如果有空格，将最终被解析成为字符串
1. &checkbox checked="{{false}}"& &/checkbox& ，不加{{}}会当成字符串false而判定为true &br/& 2. &view&{{"hello" + name}}&/view&
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
block wx:for
渲染一个包含多节点的结构块。
指定列表中项目的唯一的标识符。
wx:if &br/& wx:elif &br/&
wx:else &br/& wx:if vs hidden
1. 条件渲染 &br/& 2. wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗
1. &view wx:if="{{condition}}"& True &/view&
block wx:if
方便整体控制
1. 定义代码片段 &br/& 2. name属性定义模板名字&br/& 3. is属性声明需要的使用的模板并需要传入data &br/& 4. 模板有自己的作用域，只能使用data传入数据
import和include
1. import引用目前文件定义的模板 &br/& 2. include可以将目标文件除了&template/&的整个代码引入，相当于是拷贝到include位置
1. import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
1. touchstart、touchmove、touchcancel、touchend、、taplongtap &br/& 2. 如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。(说白了，就是绑定事件js位置会带一个对象，其中包括很多属性)
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
bindtap &br/&
catchtouchstart
WXSS和组件等持续更新中...
觉得还不错就点个赞吧~
0 收藏&&|&&1
你可能感兴趣的文章
58 收藏，2.6k
2 收藏，3.8k
3 收藏，642
分享到微博？
明天提醒我
我要该，理由是：您的位置：> -&
-& >下载 档案号：#167492
软件授权：
软件大小：
软件语言：
软件评级：
官方主页：
更新时间：
应用平台：
复制到论坛
复制到博客
绿盟口号! 伸出你的手 - 绿色分享:
官方评级：3/139
同类软件推荐
本类下载排行