勘探-微信小程序_微信小程序

上一篇: 用vscode开发微信小程序下一篇:微信小程序require 引用 BASE64....

勘探-微信小程序

发布时间：2019-08-05 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了勘探-微信小程序，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

mini-PRogram
勘探-微信小程序
注册小程序账号
前往官网注册--流程简单，不赘述.
在网站的“设置”-“开发者设置”中,得到AppId
下载开发者工具
mac
window 32
windows 64
通过开发者工具创建小程序

文件结构

小程序有全局的配置、样式、逻辑也有每个页面自己的配置、样式、逻辑文件

app.json: 全局配置--(小程序公共设置)
app.js: 全局配置--(小程序逻辑)
app.wxss: 全局配置--(小程序公共样式)
pages: 页面数组--(小程序可单独有自己的配置、样式、逻辑文件，还有一个页面结构文件)

配置部分注意项~
配置部分相对简单，So 只列出如下注意点，顺带附上个人配置：

为了方便开发者减少配置项，我们规定描述页面的这四个文件必须具有相同的路径与文件名。
每增加一个页面，必须在全局app.json文件pages参数下增加对应路径配置！
如果有菜单项，强制要求控制在2-5个！
如果配置菜单必须把小程序初始页面配成菜单list其中一个，否则无法显示菜单！！


逻辑层


函数
出现位置
可能值
说明



App()
app.js
1. 小程序生命周期函数<br/>2. 自定义函数<br/>3. 数据
1.其中自定义函数和数据为全局的<br/> 2.本文件内通过this调用自定义函数和数据，其他文件需要getApp()或者实例后调用


Page()
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


路由
 
 
在小程序中所有页面的路由全部由框架进行管理。


场景值
 
 
自行查看文档


API
 
 
自行查看文档



有兴趣的话可以自行去了解一下 【前台、后台定义】以及【销毁小程序的时机】
老规矩，剩下的列出需要注意的点：

App() 必须在 app.js 中注册，且不能注册多个。
不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
不要在 onLaunch 的时候调用 getcurrentPages()，此时 page 还没有生成。>
通过 getApp() 获取实例之后，不要私自调用生命周期函数。

WXML


语法
说明
注意
eg



{{}}
1. 用于data对象下存在的字段 出现的位置 <br/> 2. 支持简单计算及组合
1. 关键字(需要在双引号之内) <br/> 2. 花括号和引号之间如果有空格，将最终被解析成为字符串
1. <checkbox checked="{{false}}"> </checkbox> ，不加{{}}会当成字符串false而判定为true <br/> 2. <view>{{"hello" + name}}</view>


wx:for
循环数组
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 ITem
 


block wx:for
渲染一个包含多节点的结构块。
 
 


wx:key
指定列表中项目的唯一的标识符。
 
 


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
方便整体控制
 
 


template
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和组件等持续更新中...
觉得还不错就点个赞吧~

函数	出现位置	可能值	说明
App()	app.js	1. 小程序生命周期函数<br/>2. 自定义函数<br/>3. 数据	1.其中自定义函数和数据为全局的<br/> 2.本文件内通过this调用自定义函数和数据，其他文件需要getApp()或者实例后调用
Page()	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
路由			在小程序中所有页面的路由全部由框架进行管理。
场景值			自行查看文档
API			自行查看文档

语法	说明	注意	eg
{{}}	1. 用于data对象下存在的字段出现的位置 <br/> 2. 支持简单计算及组合	1. 关键字(需要在双引号之内) <br/> 2. 花括号和引号之间如果有空格，将最终被解析成为字符串	1. `<checkbox checked="{{false}}"> </checkbox>` ，不加{{}}会当成字符串false而判定为true <br/> 2. <view>{{"hello" + name}}</view>
wx:for	循环数组	默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 ITem
block wx:for	渲染一个包含多节点的结构块。
wx:key	指定列表中项目的唯一的标识符。
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	方便整体控制
template	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`

脚本宝典总结

以上是脚本宝典为你收集整理的勘探-微信小程序全部内容，希望文章能够帮你解决勘探-微信小程序所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

上一篇: 用vscode开发微信小程序下一篇:微信小程序require 引用 BASE64....

猜你在找的微信小程序相关文章

基于后端云微信小程序开发 2019-08-05
微信小程序Taro开发(1)：Taro安装及使用 2019-06-10
微信小程序开发资源汇总 awesome-wechat-weapp(不定期更新) 2019-06-09
微信小程序 - 收藏集 - 掘金 2019-06-21
微信小程序 Demo - 收藏集 - 掘金 2019-06-07
微信小程序概念篇 2019-06-30
我研究微信小程序所有资源汇总 2019-06-15
微信小程序资源汇总 2019-06-15
微信小程序 demo 整理 2019-06-27
前端资源系列（3）-微信小程序开发资源汇总 2019-06-28

全站导航更多

最新微信小程序教程

热门微信小程序教程

勘探-微信小程序

mini-PRogram

注册小程序账号

下载开发者工具

通过开发者工具创建小程序

文件结构

配置部分注意项~

逻辑层

有兴趣的话可以自行去了解一下 【前台、后台定义】以及【销毁小程序的时机】

WXML

WXSS和组件等持续更新中...

脚本宝典总结

有兴趣的话可以自行去了解一下【前台、后台定义】以及【销毁小程序的时机】