一小时学会微信小程序

一小时学会微信小程序

目录

• 一、小程序概要
  • 1.1、发展历史
  • 1.2、小程序的诞生
• 二、微信小程序介绍
• 三、开发微信小程序的软件下载与初步配置 
  3.1、获取微信小程序的AppID
• 3.2、下载安装微信开发者工具
• 3.3、创建第一个小程序项目 
• 3.4、小程序项目的基本组成结构
• 3.5、小程序配置的介绍

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

一：小程序概要

提起⼩程序，⼤家⾸先想到的就是腾讯的微信⼩程序，其实，⼩程序不⽌这⼀家，只是腾讯的微信⼩程序推出的较早。⽬前，⼩程序群雄逐⿅，BAT【指百度公司（Baidu）、阿⾥巴巴集团（Alibaba）、腾讯公司（Tencent）】BAT都已完成了⼩程序的布局。腾讯的微信⼩程序 2017年1⽉9⽇正式上线，阿⾥巴巴的⽀付宝⼩程序 2017年9⽉20⽇正式上线，百度智能⼩程序 2018年7⽉4⽇正式 上线。字节跳动旗下的今⽇头条⼩程序2018年11⽉17⽇正式上线，随后推出抖⾳⼩程序。他们都推出了⾃⼰的开发⼯具。

1.1：发展历史

随着网络的不断发展和更多高性价比智能手机的普及，以及人们对工作、生活、娱乐等多方面的需求日益增长，各种移动应用程序App（英文全称为 Application）应运而生。当太多App占满用户的手机屏幕和内存时，手机就容易出现内存容量紧张和运行速度变慢的情况。同时，App的升级和下载本身也在消耗手机带宽和系统资源，致使App的日益丰富与手机运行速度之间的矛盾日渐加重。 针对此矛盾，各大移动应用厂商提出了各自的解决方案。2013年8月22日，百度正式在百度世界大会上首先提出“轻应用”（Lght App）的概念。百度将轻应用定义为一种无须下载、即搜即用的全功能App，既有媲美本地原生App（Native App）的用户体验，又具备Web App可被检索与智能分发的特性。后续UC开放平台、支付宝公众平台等类似轻应用平台相继发声。这些平台都是基于HTML5（超文本标记语言的第五次重大修改，简称H5）推出的Web App，但是由于未形成账号体系、不符合用户习惯等，用户使用率较低，活跃度较低，这些平台并没有发展起来。 

1.2：小程序的诞生

2016年，微信之父张小龙意识到微信解决以上问题有重大的潜在商业价值，可以围绕庞大的微信用户入口，构建一个应用生态闭环。2016年1月11日，张小龙透露将在订阅号和服务号外新设微信“应用号”。经过一年多的开发，2017年1月9日，张小龙在2017年微信公开课Pro上宣布的小程序正式上线。 自2016年9月22日开始内测到2018年年初，在一年多的时间里，小程序的功能经过快速的优化迭代，培养了大量用户。根据2018年1月15日微信公开课数据，目前小程序日活跃用户数已达1.7亿户、已上线小程序58万个，覆盖100万开发者、2300个第三方平台。上线不足一个月的小游戏“跳一跳”累计用户达3.1亿户，跃居小程序使用榜首，用户次日留存（次日仍然登录使用）率达到65%。

二：微信小程序介绍

微信小程序是一种不用下载就能使用的应用，也是一项创新，经过将近两年的发展，已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果，已经有超过150万的开发者加入到了微信小程序的开发，与我们一起共同发力推动微信小程序的发展，微信小程序应用数量超过了一百万，覆盖200多个细分的行业，日活用户达到两个亿，微信小程序还在许多城市实现了支持地铁、公交服务。微信小程序发展带来更多的就业机会，2017年小程序带动就业104万人，社会效应不断提升

三：开发微信小程序的软件下载与初步配置 

首先我们要去注册微信小程序测试号

官网：https://mp.weixin.qq.com

第一步：点击立即注册

选择微信小程序

第二步：依次填写个人信息

第三步：信息登记中，主体类型选择个人，然后在依次填写主体信息登记

至此，我们的微信小程序测试号就注册完成了！ 

3.1：获取微信小程序的AppID

登录我们刚刚注册的测试号，选择开发管理，点击开发设置即可看到自己的AppID

 3.2:下载安装微信开发者工具

推荐下载和安装最新的稳定版Stable Build的微信开发者工具

链接：微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com

 安装小程序就建议一直next

3.3：创建第一个小程序项目 

第一步：点击加号后，输入我们的项目名称，文件目录，输入我们的AppID后，选择不使用云开发，然后点击确定

至此，我们的第一个微信小程序就创建成功！

然后呢，我们可以点击预览,通过我们当前账号的微信扫一扫，在手机上查看我们刚刚创建的小程序

 扩展：修改主体颜色，点击小齿轮，选择外观，即可修改

3.4：小程序项目的基本组成结构

我们可以点击左上角的三个选项来控制当前我们需要展示那些页面

项目目录结构：

pages：用来存放所有小程序的页面

utils：用来存放工具性质的模块（例如:格式化时间的自定义模块

app.js：小程序项目的入口文件

app.json：是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab等

app.wxss：小程序项目的全局样式文件

project.config.json：项目的配置文件

sitemap.json：用来配置小程序及其页面是否允许被微信索引

页面目录结构：

.js文件(页面的脚本文件，存放页面的数据、事件处理函数等）

.json文件（当前页面的配置文件，配置窗口的外观、表现等

.wxml文件（页面的模板结构文件

.wxss文件（当前页面的样式表文件

3.5：小程序配置的使用

一：app.json

1、pages:用来记录当前小程序的所有页面的路径

2、window:全局定义小程序所有页面的背景色、文字颜色等

3、style:全局定义小程序组件所使用的样式版本，v2代表使用全新的样式

4、sitemapLocation:用来指明sitemap.json的位置

二：project.config.json

1、setting:中保存了编译相关的配置

2、projectname:中保存的是项目名称

3、appid:中保存的是小程序的账号ID

三：sitemap.json

微信现已开放小程序内搜索，效果类似于PC网页的SEO。sitemap.json文件用来配置小程序页面是否允许微信索引。
当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。

默认是允许被索引的，page:*表示所有的页面

如果我们想不被微信索引到的话，我们跨域在action中加上dis

如图所示：

四、微信小程序中的常用标签

4.1：view

在微信小程序开发中，view就相当于html5中的div，也是块状元素

官方文档给出的解释呢就是：视图容器

我们在编写html5页面所用的div呢，在开发小程序中就改成view即可

属性说明：

4.2：scroll-view

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度

说白了其实就是一个可以 允许滚动的容器，只需要设置最大高度即可

属性说明：

wxml

 wxss

4.3：swiper与swiper-item

滑块视图容器。其中只可放置swiper-item组件

通俗点讲呢，就是轮播图组件，微信小程序中，轮播图我们不用在自己去写

可以用它自带的swiper组件与swiper-view共同来完成

swiper属性说明：

<swiper class="swiper-content" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay="true" interval="2000"
circular>
<!-- circular：衔接滑动 -->
<!-- 未激活的小圆点的颜色：indicator-color -->
<!-- autoplay:自动轮播 -->
<!-- indicator-dots:开启小圆点 -->
<swiper-item>
  <view class="item">A</view>
</swiper-item>
<swiper-item>
  <view class="item">B</view>
</swiper-item>
<swiper-item>
  <view class="item">C</view>
</swiper-item>
</swiper>

<text>需求文档策划书</text>  <!-- 长按选中效果需加上selectable -->

<rich-text nodes="<h2 style='color: green;'>标题一</h2>"></rich-text>

<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>

<image src="/images/rocket_top.png" mode="aspectFit" style="border: 1px red solid;"/>

<template>
    <view>
        <view class="login-bg">
            <view class="login-body" open-type="getUserInfo" @click="getUser">
                微信授权登陆
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data( {
            return {}
        },
        methods: {
            getUser(e {
                wx.getUserProfile({
                    desc: '用于完善会员资料',
                    success: (res => {
                        console.log(res
                    }
                }
            },
        }
    }
</script>

<style>
</style>

声明：本文由用户投稿上传，本站不保证内容的真实与正确性，并且不承担相关法律责任，如有侵权请提供版权资料并联系删除！

编程笔记 » 一小时学会微信小程序