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

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

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;
}

目录
相关文章
|
14天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
208 7
|
14天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
281 1
|
25天前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
43 1
|
22天前
|
人工智能 小程序 搜索推荐
成功案例分享|使用AI运动识别插件+微搭,快速搭建AI美体运动小程序
今天给大家分享一个最近使用我们的“AI运动识别小程序插件”+“微搭”搭建小程序的经典案例。
成功案例分享|使用AI运动识别插件+微搭,快速搭建AI美体运动小程序
|
14天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
109 3
|
18天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
106 1
|
19天前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
276 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
20天前
|
JavaScript 小程序 前端开发
微信小程序 案例二 飞机大战
微信小程序 案例二 飞机大战
37 0
微信小程序 案例二 飞机大战
|
11天前
|
小程序 搜索推荐 前端开发
短剧小程序开发案例
首先,明确你的短剧平台的目标用户群体和他们的需求。比如,年轻用户可能更倾向于轻松、幽默的短剧内容,而家庭用户则可能更偏爱教育、亲子类的短剧。了解用户需求有助于你设计更符合他们口味的功能和界面
|
14天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
159 0