码迷,mamicode.com
首页 > 微信 > 详细

勘探-微信小程序

时间:2020-05-11 15:08:19      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:http   很多   引号   拷贝   get   开发   --   目标   声明   

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和组件等持续更新中...

觉得还不错就点个赞吧~

勘探-微信小程序

标签:http   很多   引号   拷贝   get   开发   --   目标   声明   

原文地址:https://www.cnblogs.com/jlfw/p/12869043.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!