微信小程序的概要

标题图

微信小程序的概要

学习小程序要了解一下什么事小程序,小程序开发前需要做哪些准备,微信小程序开发工具的使用,小程序中的目录结构解析,视图和渲染,事件。

小程序的配置详解,小程序的生命周期与app对象的使用,页面的配置,页面的生命周期和参数传递,用户的登录,UI开发。

UI开发中的布局基础,样式基础,组件的使用,视图容器的使用,基础内容组件,表单组件,操作反馈小工具,导航,多媒体的使用。

地图和LBS,画布,首页的属性,api的开发,请求服务器数据,文件的上传和下载,websocket实现即时聊天,图片的选择和调用微信拍照,微信录音,获取微信网络状态,获取当前位置,音频的控制,缓存数据,重力感应,获取微信小程序的用户信息,微信小程序的微信支付,罗盘等

微信小程序的简介

问:
什么是微信小程序?
微信小程序是用来干什么的?
什么样的互联网产品适用于微信小程序?
微信小程序将带来哪些变革?

目录结构详解

项目的目录结构

pages->index->index.js // 页面入口->index.wxml // 布局UI->index.wxss // 布局样式->logs->logs.js->logs.json // 页面的配置文件->logs.wxml->logs.wxssutilsapp.jsapp.jsonapp.wxss

视图与渲染

组件的使用,数据的绑定,渲染标签,模版的使用

// index.jsPage({ data: { }, onLoad: function(options) { // 页面的初始化 }, onReady: function() { // 页面内的渲染 }, onShow: function() { // 页面的显示 }, onHide: function() { // 页面的隐藏 }, onUnload: function() { // 页面关闭 }})

渲染标签

显示

<view wx:if="{{true}}">dashu</view>

隐藏

<view wx:if="{{false}}">dashu</view>

循环

<view wx:for="{{[1,2,3]}}"> 循环 {{item}} {{index}}<view>
wx:for-item="news-item"wx:for-index="news-index"
shift(): 删除数据

模版

templates->header.wxml<text>投吧</text>
// index.wxml<include src="../templates/header"/>
templates->footer.wxml
// footer.wxml<template name="f1">内容</template><template name="f2">内容</template>
<import src="../temmplates/footer"/><template is="foot2" data="{{text:"导入设置内容"}}">

如果看了觉得不错

点赞!转发!

达叔小生:往后余生,唯独有你
You and me, we are family !
90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
简书博客: 达叔小生
https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞

相关文章