小程序介绍

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返回给你。你就知道每次是哪一个用户登录了小程序

微信小程序知识点梳理的更多相关文章

  1. 微信小程序知识点汇总

    微信小程序常用标签与HTML的对应关系 <div></div> <view></view> <h1></h1>...<h6 ...

  2. 微信小程序支付简单小结与梳理

    前言 公司最近在做微信小程序,被分配到做支付这一块,现在对这一块做一个简单的总结和梳理. 支付,对于购物来说,可以说是占据了十分重要的一块,毕竟能收到钱才是重点. 当然在开发之前,我们需要有下面这些东 ...

  3. 微信小程序--登录流程梳理

    前言 微信小程序凡是需要记录用户信息都需要登录,但是也有几种不同的登录方式,但是在小程序部分的登录流程是一样的.之前就朦朦胧胧地用之前项目的逻辑改改直接用了,这个新项目要用就又结合官方文档重新梳理了下 ...

  4. [转]微信小程序支付简单小结与梳理

    本文转自:https://www.cnblogs.com/onetwo/p/6667424.html 公司最近在做微信小程序,被分配到做支付这一块,现在对这一块做一个简单的总结和梳理. 支付,对于购物 ...

  5. 微信小程序入门知识点总结

    微信小程序入门知识点总结 前情介绍 ​ 微信小程序就不多介绍了,我们想要开发微信小程序首先得到微信公众平台 下方的小程序处注册相关账号并登录,接着填写小程序相关资料.在设置处可找到AppID用以开发微 ...

  6. 微信小程序开发 [06] 一些补充的知识点

    0.写在前面的话 前几章的内容串联起来,基本上已经能写比较基础的小程序页面逻辑了,当然,wxml和wxss的我并没有写,因为前端我也并不擅长.这个章节,准备随便叨叨,然后补充一些之前没有提到的基础知识 ...

  7. [转]微信小程序登录逻辑梳理

    本文转自:http://www.jianshu.com/p/d9996cafdb31 官方文档 文档相关地址: 用户登录 获取用户数据 用户数据的签名验证和加解密                   ...

  8. 微信小程序第3课 目录结构及小知识点

    目录 目录结构 安装包下载地址 一.pages目录介绍 二.index目录介绍 index.js(相当JavaScript文件,必不可少的) index.json(可以不需要) index.wxml( ...

  9. 微信小程序开发总结(一)

    微信小程序从2016年9月21日开始内测 ,以及在2017年1月9号正式发布也有一段时间了, 很多人开始拥抱微信小程序,我也是一样 ,从微信小程序内测开始就加入进来 , 开始研究微信小程序 ,属于最早 ...

随机推荐

  1. redis笔记_源码_字典dict

    参考:https://redissrc.readthedocs.io/en/latest/datastruct/dict.html Expand: 条件: 新的table 大小: Rehash: 条件 ...

  2. ForkJoin学习笔记

    1.Fork/Join框架:(分治算法思想) 在必要的情况下,将一个大任务,进行拆分(fork) 成若干个子任务(拆到不能再拆,这里就是指我们制定的拆分的临界值),再将一个个小任务的结果进行join汇 ...

  3. springboot2.x jpa接入多数据源

    环境:springboot 2.1.4 数据源引入方式 数据源一 @Configuration @EnableTransactionManagement @EnableJpaRepositories( ...

  4. error C2872: 'ULONG_PTR' : ambiguous symbol

    转自VC错误:http://www.vcerror.com/?p=74 问题描述: 错误:error C2872: 'ULONG_PTR' : ambiguous symbol 解决方法: 详细的解决 ...

  5. 9.2 sun.py

    import requests from bs4 import BeautifulSoup url = 'http://wz.sun0769.com/index.php/question/reply? ...

  6. 用户管理模块之mysql.user

    不使用-h参数来指定登录host,默认会连接localhost,仅当mysql.user表中有一条对应的localhost访问授权(username@%不对任何主机做限制也不行)时登录才成功,否则登录 ...

  7. python 对excel操作

    在python中,对excel表格读,写,追加数据,用以下三个模块:1.wlrd 读取excel表中的数据2.xlwt 创建一个全新的excel文件,然后对这个文件进行写入内容以及保存.3.xluti ...

  8. DES加密算法-C语言

    头文件:DES.h #ifndef DES_hpp #define DES_hpp #include <stdio.h> #include <memory.h> #includ ...

  9. 16进制与utf-8

    很多人将数据的存储.传输方式和展现形式混为一谈. 类似的16进制 2进制是讲内容在电脑里面的存储或者传输的一种格式, 而utf-8 gb2312 等是输出的展现的一种格式 不是一回事,另外 gbk包含 ...

  10. C++ Builder VCL库函数简介

    C++ Builder VCL库函数简介 2002-07-05· · ··C++builder资源中心 1 2 3 下一页 一.BORLAND C++ BUILDER VCL的内存管理函数 1. Al ...