微信小程序知识点梳理
小程序介绍
17年一月9号,小程序刚发布的时候,个人很幸运的成为第一批吃螃蟹的人,当然也是第一批采坑的人。
小程序是基于微信的一种应用,使用微信自定义的组件,让我们使用JavaScript的方式,达到匹配原生应用的效果。小程序的一大优势就是,你只要有个微信,你就能搜索你所需要的点餐、买票、旅游等一些日常需求的小程序,而且——用完即毁、无需下载。
小程序开发所需要的技能
小程序是最适合前端开发人员,你所需的知识仅仅是JavaScript、css、html的基本知识,如果你有其他单页面应用的开发经验,那小程序会很快上手,但是这都不是必须的。
小程序的知识体系的梳理
项目整体架构
app.js 小程序的启动js文件。
app.json 小程序的全局json配置文件。同时也可以进行pages配置、底部tab切换的配置等等。
app.wxss 小程序的全局样式。
pages 小程序的相关页面。在app.json中配置了pages,pages文件夹就会自动出现对应的页面。
pages
js 是小程序的逻辑部分。
wxss 小程序的对应page的布局,也就是局部样式。相当于web网页的css。
wxml 页面布局。相当于web网页的html。
json 小程序的局部页面配置。
小程序路由
1、push路由
wx.navigateTo({
url:'/pages/index/index'
});123
2、替换路由
wx.redirectTo({
url:"/pages/index/index"
});123
3、路由回退
wx.navigateBack({
delta: 1
});123
4、tab切换
wx.switchTab({
url:'相关页面路径'
});123
5、路由清理替换
wx.reLaunch({
url:'新的页面路径'
});123
小程序路由传参
wx.navigateTo({
url: "/pages/index/index?id="+inputValue
});123
就会把inputValue的值传递过去。在相应的界面的onLoad周期函数的options中接收。
//index.js
onLoad: function(options){
console.log(options.id);
}1234
小程序界面交互(Toast、Modal)
Toast分三种:sucess、loading、none;
Modal:title、content属性是必须要的。
modal还有一些其他的属性,比如确认按钮的显示。
小程序page的生命周期
onLoad——初始化加载一次
onReady——页面初次渲染完成
onShow——监听页面显示
onHide——监听页面隐藏
onUnload——监听页面卸载
生命周期函数的本质:给开发人员一个触发时机的暴露的接口。在这样的时机下,我们可以做什么?
小程序如何更改data
vue中:this.message = ‘hello world’;
小程序中:
this.setData({
message: 'hello world'
})123
小程序分享功能
使用onShareAppMessage函数可以实现分享转发功能。
onShareAppMessage: function(){
return {
title:'图吧同行',
path:'/pages/index/index',
desc:'描述信息'
}
}1234567
登录功能
小程序的登录是一个项目的核心逻辑。分为三步。
第一步:wx.login,获取code。
第二步:把code发送给我们的后台服务器,得到openId。
第三步:服务器把openId返回给你。你就知道每次是哪一个用户登录了小程序
微信小程序知识点梳理的更多相关文章
- 微信小程序知识点汇总
微信小程序常用标签与HTML的对应关系 <div></div> <view></view> <h1></h1>...<h6 ...
- 微信小程序支付简单小结与梳理
前言 公司最近在做微信小程序,被分配到做支付这一块,现在对这一块做一个简单的总结和梳理. 支付,对于购物来说,可以说是占据了十分重要的一块,毕竟能收到钱才是重点. 当然在开发之前,我们需要有下面这些东 ...
- 微信小程序--登录流程梳理
前言 微信小程序凡是需要记录用户信息都需要登录,但是也有几种不同的登录方式,但是在小程序部分的登录流程是一样的.之前就朦朦胧胧地用之前项目的逻辑改改直接用了,这个新项目要用就又结合官方文档重新梳理了下 ...
- [转]微信小程序支付简单小结与梳理
本文转自:https://www.cnblogs.com/onetwo/p/6667424.html 公司最近在做微信小程序,被分配到做支付这一块,现在对这一块做一个简单的总结和梳理. 支付,对于购物 ...
- 微信小程序入门知识点总结
微信小程序入门知识点总结 前情介绍 微信小程序就不多介绍了,我们想要开发微信小程序首先得到微信公众平台 下方的小程序处注册相关账号并登录,接着填写小程序相关资料.在设置处可找到AppID用以开发微 ...
- 微信小程序开发 [06] 一些补充的知识点
0.写在前面的话 前几章的内容串联起来,基本上已经能写比较基础的小程序页面逻辑了,当然,wxml和wxss的我并没有写,因为前端我也并不擅长.这个章节,准备随便叨叨,然后补充一些之前没有提到的基础知识 ...
- [转]微信小程序登录逻辑梳理
本文转自:http://www.jianshu.com/p/d9996cafdb31 官方文档 文档相关地址: 用户登录 获取用户数据 用户数据的签名验证和加解密 ...
- 微信小程序第3课 目录结构及小知识点
目录 目录结构 安装包下载地址 一.pages目录介绍 二.index目录介绍 index.js(相当JavaScript文件,必不可少的) index.json(可以不需要) index.wxml( ...
- 微信小程序开发总结(一)
微信小程序从2016年9月21日开始内测 ,以及在2017年1月9号正式发布也有一段时间了, 很多人开始拥抱微信小程序,我也是一样 ,从微信小程序内测开始就加入进来 , 开始研究微信小程序 ,属于最早 ...
随机推荐
- js获取当前网址Url
js获取当前路径并截取 var str = window.location.href;// str = 'https://localhost:8080/mark' var index = str .l ...
- vsftp 被动模式配置
直接复制粘切过来就能用 这里只讲下配置,安装方法可以直接yum 配置文件修改 anonymous_enable=NO #关闭匿名用户 xferlog_file=/var/log/vsftpd.log ...
- ros清理日志文件
检查日志文件: rosclean check 清理日志文件: rosclean purge
- LUOGU P3413 SAC#1 - 萌数(数位dp)
传送门 解题思路 首先这道题如果有两个以上长度的回文串,那么就一定有三个或两个的回文串,所以只需要记录一下上一位和上上位填的数字就行了.数位\(dp\),用记忆化搜索来实现.设\(f[i][j][k] ...
- go网络库cellent实现socket聊天功能
一 .介绍 cellnet是一个组件化.高扩展性.高性能的开源服务器网络库 git地址:https://github.com/davyxu/cellnet 主要使用领域: 游戏服务器 方便定制私有协议 ...
- .net core, docker 在vs2019开发过程中的问题以及解决办法
.net core, docker 在vs2019开发过程中的问题以及解决办法 记录下来,帮助Ta人~ 1.vs调试,快Build完后提示Docker 端口:xxxx,xxxx,xxxx占用 解决办法 ...
- iis网站域名绑定
这里解释两种绑定 一.全局ip未分配 二.绑定指定域名 1.添加主机名 注释:没有绑定主机名的进站默认就会被访问.绑定主机名的进站访问特定主机名的网站.
- System.Math.cs
ylbtech-System.Math.cs 1. 程序集 mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c56193 ...
- tcp通信,解决断包、粘包的问题
1.TCP和UDP的区别 TCP(transport control protocol,传输控制协议)是面向连接的,面向流的,提供高可靠性服务.收发两端(客户端和服务器端)都要有一一成对的socket ...
- 压测:mysqlslap
MySQL从5.1.4版开始带有一个压力测试工具mysqlslap,通过模拟多个并发客户端访问mysql来执行测试,使用起来非常简单,通过mysqlslap –help可以获得可用的选项.这里列一些主 ...