微信小程序入门->小程序简介,小程序商城项目案例,小程序入门案例及目录结构

news2024/11/23 14:51:50

1.小程序简介

什么是小程序?

1. 2017年度百度百科十大热词之一

2. 微信小程序(wei xin xiao cheng xu),简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用( 张小龙对其的定义是无需安装,用完即走,实际上是需要安装的,只不过小程序的体积特别小, 下载速度很快,用户感觉不到下载的过程 )

3. 限制:同一个分包中的页面享有共同的预下载大小限额 2M,限额会在工具中打包时校验。

4. 2017年1月9日0点,万众瞩目的微信第一批小程序正式低调上线。

小程序可以干什么?

1. 同App进行互补,提供同app类似的功能,比app操作更加简洁的轻应用

2. 通过扫一扫或者在微信搜索即可下载

3. 用户使用频率不高,但又不得不用的功能软件,目前看来小程序是首选

4. 连接线上线下

5. 开发门槛低, 成本低 

相关资料

1) 官网:https://mp.weixin.qq.com/

# 开始

开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序。

跟随这个教程,开始你的小程序之旅吧!

## 申请帐号

进入[小程序注册页](https://mp.weixin.qq.com/wxopen/waregister?action=step1) 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。

![img](https://res.wx.qq.com/wxdoc/dist/assets/img/register.f3571165.png)

在这个小程序管理平台,你可以管理你的小程序的权限,查看数据报表,发布小程序等操作。

登录 [小程序后台](https://mp.weixin.qq.com/) ,我们可以在菜单 “开发”-“开发设置” 看到小程序的 **AppID** 了 。

![img](https://res.wx.qq.com/wxdoc/dist/assets/img/setting.f53f9212.png)

小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 AppID)。

有了小程序帐号之后,我们需要一个工具来开发小程序。

## 安装开发工具

前往 [开发者工具下载页面](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html) ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 [《开发者工具介绍》](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html) 。

打开小程序开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧!

## 你的第一个小程序

新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请到的小程序的 AppID,给你的项目起一个好听的名字,勾选 "不使用云服务" (注意: 你要选择一个空的目录才可以创建项目),点击新建,你就得到了你的第一个小程序了,点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

![image-20220725182340053](images\image-20220725182340053.png)

接下来我们来预览一下这个小程序的效果。

2.小程序商城项目案例

## 编译预览

点击工具上的编译按钮,可以在工具的左侧模拟器界面看到这个小程序的表现,也可以点击预览按钮,通过微信的扫一扫在手机上体验你的第一个小程序。

3.小程序入门案例及目录结构

//min2\app.json
{
  "pages":[
    "pages/user/user",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#00f",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
// pages/user/user.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
userName:'牛逼' 
  },
xxx(){
  console.log('被点了');
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})
//min2\pages\user\user.json
{
  "usingComponents": {},
  "navigationBarTitleText":"用户界面"
}
//min2\pages\user\user.wxml
<!--pages/user/user.wxml-->
<view class="container">
    用户信息:{{userName}}
    <button bindtap="xxx">点我</button>

</view>
//min2\pages\user\user.wxss
/* pages/user/user.wxss */
.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #00ff00;
}


 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1092217.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux8yum安装mysql5.7版本流程

Linux8yum安装mysql Linux8yum安装报错解决 yum安装流程 首先下载mysql的yum配置 wget http://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm安装mysql源 yum -y install mysql57-community-release-el7-11.noarch.rpm安装mysql yum -y install mysql-s…

Leetcode算法解析——查找总价格为目标值的两个商品

1. 题目链接&#xff1a;LCR 179. 查找总价格为目标值的两个商品 2. 题目描述&#xff1a; 商品价格按照升序记录于数组 price。请在购物车中找到两个商品的价格总和刚好是 target。若存在多种情况&#xff0c;返回任一结果即可。 示例 1&#xff1a; 输入&#xff1a;price …

分布式链路追踪如何跨线程

背景 我们希望实现全链路信息&#xff0c;但是代码中一般都会异步的线程处理。 解决思路 我们可以对以前的 Runable 和 Callable 进行增强。 可以使用 ali 已经存在的实现方式。 TransmittableThreadLocal (TTL) 解决异步执行时上下文传递的问题 核心的实现思路如下&#…

C++程序加速方法

C程序加速方法 1. 将反复使用的数据存放在全局变量里面2. 使用多线程3. 用a和a&#xff0c;a–,--a4. 减少除法运算5. 尽量减少值传递&#xff0c;多用引用来传递参数。6. 循环引发的讨论1&#xff08;循环内定义&#xff0c;还是循环外定义对象&#xff09;7. 循环引发的讨论2…

Word论文封面下划线怎么都对不齐

我们常常发现&#xff0c;无论是写论文还是平时填写word封面的信息的时候&#xff0c;下划线老是随着字符的多少的边长变短&#xff0c;我们使用空格键也非常不好对齐&#xff0c;这就给我们造成了很大的烦恼&#xff0c;想想自己也是这样&#xff0c;我一旦输入字符&#xff0…

JVM:虚拟机类加载机制

JVM:虚拟机类加载机制 什么是JVM的类加载 众所周知&#xff0c;Java是面向对象编程的一门语言&#xff0c;每一个对象都是一个类的实例。所谓类加载&#xff0c;就是JVM虚拟机把描述类的数据从class文件加载到内存&#xff0c;并对数据进行校验&#xff0c;转换解析和初始化&a…

为什么现在很多企业都在做私域?

不知大家发现没有&#xff0c;最近两年&#xff0c;宣传私域流量的声量好像没那么大了&#xff0c;但是&#xff0c;踏踏实实去做私域流量的企业&#xff0c;却越来越多了&#xff0c;好像大家突然统一了口径&#xff0c;不再只是停留在说&#xff0c;而是开始亲身实践&#xf…

【自然语言处理】— 隐马尔可夫模型详解、例解

【自然语言处理】— 隐马尔可夫模型 【自然语言处理】— 隐马尔可夫模型引例隐马尔可夫模型概念隐马尔可夫模型的关键隐马尔可夫模型的数学表示隐含状态与观测结果状态转移矩阵观测概率矩阵初始状态概率向量 小结 【自然语言处理】— 隐马尔可夫模型 引例 假设有三种不同的骰…

番茄小说推文和番茄短剧推广授权怎么申请

可以通过”巨量推文“进行申请 番茄小说和番茄短剧在cpa拉新市场还是比较火热得 番茄小说分为拉新用户和失活订单两种模式 番茄短剧也是按照cpa拉新方式进行结算

广度优先遍历详解

前言 广度优先搜索不同于深度优先搜索&#xff0c;它是一层层进行遍历的&#xff0c;因此需要先入先出的队列而非先入后出的栈进行遍历。由于是按层次进行遍历&#xff0c;广度优先搜索时按照“广”的方向进行遍历的 一、工作原理 我们构造这样一个图&#xff08;如图1&#x…

Android studio控制台 输出乱码解决方法

在AS的安装目录&#xff0c;找到 studio64.exe.vmoptions 文件&#xff0c; 用编辑器打开文件&#xff0c;在最后面加上下面的代码&#xff1a; -Defile.encodingUTF-8然后 重启AS。 注意&#xff1a; 下面两种方式也能打开studio64.exe.vmoptions 文件&#xff0c;但是需要确…

投资组合之如何估值

文章目录 如何估值一、PE估值法1、PE估值法的定义2、参考标准&#xff08;1&#xff09;常规标准&#xff1a;25倍合理市盈率。&#xff08;2&#xff09;同行业对比。&#xff08;3&#xff09;跟历史市盈率相比。 3、PE估值法的适用范围4、PE估值法的优势5、PE估值法的劣势&a…

ChatGpt 反向代理

一&#xff0c;背景 看了看网上的文章&#xff0c;实现接口国内访问的方法有很多。 1&#xff0c;自己买国外服务器 这种成本比较高&#xff0c;因为单纯的就是用个接口&#xff0c;专门买个服务器还是比较奢侈的。 2&#xff0c;自己挂代理 这种的使用的代理干净与否都不…

C++笔记之获取线程ID以及线程ID的用处

C笔记之获取线程ID以及线程ID的用处 code review! 文章目录 C笔记之获取线程ID以及线程ID的用处一.获取ID二.线程ID的用处2.1.线程池管理2.2.动态资源分配2.3.使用线程同步机制实现互斥访问共享资源2.4.使用线程 ID 辅助线程同步2.5.任务分发&#xff1a;线程ID可以用于将任务…

【Java每日一题】——第三十题:班级管理程序设计(2023.10.14)

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

10-网络篇-DHCP获取的参数详解

一个设备接入路由器局域网时&#xff0c;是通过DHCP获取网络信息&#xff0c;从而完成网络配置的获取。如下图所示为windows系统通过DHCP所要获取的网络配置&#xff1a;IP、子网掩码、网关、DNS服务器。任何设备要上网前&#xff0c;都需要知道这几个参数&#xff0c;下面对这…

ODrive移植keil(七)—— 插值算法和偏置校准

目录 一、角度读取1.1、硬件接线1.2、程序演示1.3、代码说明 二、锁相环和插值算法2.1、锁相环2.2、插值2.3、角度补偿 三、偏置校准3.1、硬件接线3.2、官方代码操作3.3、移植后的代码操作3.4、代码说明3.5、SimpleFOC的偏置校准对比 ODrive、VESC和SimpleFOC 教程链接汇总&…

Ubuntu的Python从2.x升级到3.x

我的Ubuntu系统默认是2.7,我想升级为3.5 升级python3.5 下载python sudo apt-get install python3查看 刚才下载的Python程序被安装在usr/local/lib/python3.5 中 cd usr/local/lib备份一下 sudo cp /usr/bin/python /usr/bin/python_bak删除python的旧关联 sudo rm -rf py…

SpringBean的初始化流程

当我们启动Spring容器后&#xff0c;会先通过AbstractApplicationContext#refresh方法&#xff0c;调用BeanFactoryPostProcess方法&#xff0c;可以在bean初始化前&#xff0c;修改context中的BeanDefinition&#xff0c;但是因为此时Bean还没有初始化&#xff0c;所以并不会修…

valarray 包含对象成员的类(cpp14章)

C代码重用 1.公有继承可以实现 2.包含、私有继承、保护继承用于实现has-a关系&#xff0c;即新的类将包含另一个类的对象。 &#xff08;使用这样类成员&#xff1a;本身是另外一个类对象称为包含 &#xff08;组合或层次化&#xff09;。&#xff09; 3.函数模板、类模…