微信小程序知识点梳理

小程序介绍

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

原文地址:https://www.cnblogs.com/zhuxinpeng-looking/p/11219737.html

时间: 2024-10-30 06:23:28

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

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

前言 微信小程序凡是需要记录用户信息都需要登录,但是也有几种不同的登录方式,但是在小程序部分的登录流程是一样的.之前就朦朦胧胧地用之前项目的逻辑改改直接用了,这个新项目要用就又结合官方文档重新梳理了下,并记录一下,好记性不如烂笔头嘛,哈哈. 几种登录流程设计 利用OpenId 创建新用户 这种方式我的理解大体上就是一种静默登录,获取用户信息之后解密用户信息并通过OpenId直接创建新用户 利用Unionid 创建新用户 这种方式的特点是可以利用Unionid实现多个小程序.公众号.已有登录体系的

微信小程序全局配置知识点

疫情在家无聊总结一下微信小程序一些基础小知识希望对初学者有帮助.让我们一起对疫情“逆战”吧! 1.全局配置 ?程序根?录下的 app.json ?件?来对微信?程序进?全局配置.?件内容为?个JSON 对象 1.1 pages ?于指定?程序由哪些??组成,每?项都对应?个??的 路径(含?件名) 信息.?件名不需要写?件后缀,框架会?动去寻找对于位置的 .json, .js, .wxml,.wxss 四个?件进?处理 有多少个??,此处就应该有多少个选项 数组的第?项代表?程序的初始??(??

Django+小程序技术打造微信小程序助手

Django+小程序技术打造微信小程序助手 深入Django视图层,实践与理论相结合,带你系统地梳理视图层知识点 分层次介绍Django视图层的重要知识点,包括 HTTP请求和应答在Django框架中相应的Request对象/Response对象:Django的路由以及RESTful API设计:Django的文件管理:类视图简化视图层逻辑等等重要知识点:最后有关于视图层的实战内容. 3-1 Request&Response对象 3-2 Django的RESTful URL设计 3-3 实现个人

无需内测账号,带你体验微信小程序完整开发

文章来源:www.zretc.com/technologyDetail/200.html 前一阵子的微信小程序火爆了网络与朋友圈,迅速成为讨论焦点,大家可能觉得只有收到内测邀请才能体验小程序的开发流程,其实不然,每个人都可以体验,下面就请跟着小卓一起去了解下吧. 一.下载微信Web开发工具 首先,微信给我们提供了它自己的小程序集成开发工具,只需要到这个页面下载即可:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t

微信小程序实战教程

微信小程序实战教程(第1篇) 课程观看地址:http://www.xuetuwuyou.com/course/154 课程出自学途无忧网:http://www.xuetuwuyou.com 课时1:1.开篇 课时2:2.文档概览  课时3:3.认识小程序  课时4:4.小程序设计指南 课时5:5.响应的数据绑定  课时6:6.微信小程序游戏的演示  课时7:7.基础组件 课时8:8.view 课时9:9.文件结构  课时10:10.配置  课时11:11.逻辑层  课时12:12.注册小程序 

微信小程序开发视频教程新鲜出炉

微信小程序开发公测了,可是对于新手来说,不同的框架不同的开发机制,如何快速适应呢?微信小程序开发视频教程新鲜出炉了,从零开始一步一步搭建微信小程序,每个章节都会涉及到不同的知识点,等教程学习完你不但掌握了小程序开发全部知识,同时还拥有一个完整作品的开发经验! 有需要的朋友关注一下ytkah的微信,留言索取微信小程序开发视频教程!

浅谈微信小程序对于创业者,意味着什么?

尽管这个话题,有点儿烂大街,然而作为开发者兼创业人,兹以为很有必要为自己梳理一番. 多年前,当萌生创业的念头时,我是这样在脑海里绘制这幅蓝图的: 我需要一个域名,一个服务器,并且备了案. 我需要至少一个前端,至少一个后端,至少一枚设计师,由他们来完成开发. 我需要一个产品,一个营运,一个策划,一个市场,这样我们开发出来的产品才能让世界知道. 如果可以的话,再来一个文案,一个运维. 最后,我得去注册一家公司,这样,便可名正言顺地运作这一切. 想了很多很多,最后放弃了创业的念头,转而去做了一枚程序员

微信小程序开发优秀教程及文章合集第一期

我会不定期的选取一些优质教程,整理成辑,以便大家集中阅读: 新手向!微信小程序开发手记系列:微信小程序开发手记<一>:项目的代码结构微信小程序开发手记<二>:属性display微信小程序开发手记<三>:backgroud和border属性微信小程序开发手记<四>:视图容器微信小程序开发手记<五>:组件微信小程序开发手记<六>:API 艺龙系列:精品!艺龙小程序:开发项目遇到的问题以及解决方案:http://www.wxapp-unio

微信小程序通过api接口将json数据展现到小程序示例

实现知乎客户端的一个重要知识前提就是,要知道怎么通过知乎新闻的接口,来把数据展示到微信小程序端上. 那么我们这一就先学习一下,如何将接口获取到的数据展示到微信小程序上. 1.用到的知识点 <1> wx.request 请求接口资源(微信小程序api中的发起请求部分) <2>swiper 实现轮播图的组件 <3>wx:for 循环语句 <4>微信小程序的基础知识 2.实现原理 首先,先看一下这个请求函数 wx.request({ url: '******',