微信小程序知识点梳理
小程序介绍
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返回给你。你就知道每次是哪一个用户登录了小程序
最新文章
- jdk源码分析ArrayDeque
- iOS之百度导航SDK的坐标转换
- Linux初学 - 文件夹及文件操作
- Linux常用命令笔记
- Codeforces Round #FF (Div. 2) C. DZY Loves Sequences
- DP:Making the Grade(POJ 3666)
- socket的简单通信
- 分享form表单提交问题
- Yii框架CGridView columns中使用数组或变量传值
- 应用360云盘与SVN版本管理服务器搭建基于云端的版本控制软件
- iOS 不同类之间的传值
- poj 2299 Ultra-QuickSort(归并排序或是bit 树+离散化皆可)
- 线段树 或者 并查集 Intel Code Challenge Elimination Round (Div.1 + Div.2, combined) C
- 大话Python正则表达式
- Git 如何 clone 非 master 分支的代码
- 使用CSS让多出来的字变为省略号
- 2D射影几何和变换
- https://github.com/gaoyangxiaozhu/DockerVI
- dsPIC30F 细节点问题不定期更新ing
- anacoda 安装默认源中没有的包
热门文章
- CI的session操作
- ubuntu下安装git提示无root权限
- mySql搜索引擎
- 剑指Offer-14:输入一个链表,输出该链表中倒数第k个结点。
- 跨域问题The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by t
- SpringBoot_05_ssm拦截器和默认欢迎页面的设置
- iOS 5 ARC 入门
- CF377D Developing Game
- memcpy函数实现中的优化
- iOS疑问