zoukankan      html  css  js  c++  java
  • 微信小程序知识点梳理

    小程序介绍

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

  • 相关阅读:
    spring cloud 之config配置
    java HTTP连接 可以结合springcloud服务发布注册
    webStrom的注册码地址
    VUE的富文本编辑器
    vue2.0对于IE9浏览器的兼容
    用花生壳代理出现Invalid Host header错误
    用于时间统计数据的SQL
    Leetcode 136. Single Number
    Leetcode 36. Valid Sudoku
    VS Code
  • 原文地址:https://www.cnblogs.com/zhuxinpeng-looking/p/11219737.html
Copyright © 2011-2022 走看看