小程序入门笔记(一) 黑马程序员前端微信小程序开发教程(上)

简介: 小程序入门笔记(一) 黑马程序员前端微信小程序开发教程(上)

微信小程序基本介绍

小程序和普通网页有以下几点区别:

  1. 运行环境:小程序可以在手机的操作系统上直接运行,如微信、支付宝等;而普通网页需要在浏览器中打开才能运行。
  2. 开发技术:小程序采用前端技术进行开发,如HTML、CSS、JavaScript等;而普通网页也是使用类似的前端技术开发。
  3. 用户体验:小程序可以提供更加原生化的用户体验,可以调用手机硬件设备的功能,如摄像头、地理位置等;而普通网页对于这些功能的调用相对受限。
  4. 安全性:小程序运行在封闭的环境中,安全性较高,并且需要通过平台审核后才能上线;而普通网页的安全性相对较低,容易受到网络攻击。
  5. 分发方式:小程序可以通过应用商店进行分发,用户可以方便地搜索、下载和更新;而普通网页需要通过链接分享或搜索引擎搜索才能找到。
  6. 权限控制:小程序可以对用户的权限进行细粒度的控制,例如获取用户的地理位置、访问手机相册等;而普通网页由于运行在浏览器中,权限受到限制,无法进行这些操作。
  7. 存储能力:小程序可以在本地存储数据,包括用户的配置、缓存等;而普通网页通常只能通过cookie或localStorage等方式进行有限的本地存储。
  8. 跨平台支持:小程序可以同时支持多个操作系统,如iOS和Android;而普通网页几乎可以在任何现代浏览器上运行,跨平台性更强。
  9. 更新机制:小程序在更新时,用户无需手动下载,平台会自动推送最新版本给用户;而普通网页需要用户手动刷新页面才能获取到更新。
  10. 开发限制:小程序的开发受到平台的严格限制,需要符合一定的规范和要求,并且功能受到一定的限制;而普通网页的开发相对自由度较高。

6a7a847209ac50203753f478e380e9b.jpg

要创建第一个微信小程序,可以按照以下步骤进行:

  1. 注册成为微信公众平台开发者:访问微信公众平台(mp.weixin.qq.com),使用个人微信账号注册成为开发者。
  2. 创建小程序:登录微信公众平台后,在菜单中选择"开发",然后点击"小程序",进入小程序管理页面。点击"添加小程序"按钮,填写小程序的基本信息,包括名称、AppID、简介等,并上传小程序的图标和封面图片。
  3. 完善小程序设置:在小程序管理页面中,可以设置小程序的基本配置项,包括设置服务器域名、业务域名、支付配置等。
  4. 开发工具下载:下载微信开发者工具,用于小程序的开发和调试。微信开发者工具可以在微信公众平台的"开发"->"开发工具"中下载。
  5. 创建小程序项目:打开微信开发者工具,点击"新建小程序项目",填写小程序的AppID和项目目录,点击"确定"后即可创建小程序项目。
  6. 开发小程序页面:在微信开发者工具中,可以编写小程序的页面代码、样式和逻辑,通过预览功能可以实时查看小程序的效果。
  7. 发布小程序:完成小程序的开发后,可以在微信开发者工具中点击"上传"按钮,将小程序上传到微信公众平台进行审核。审核通过后,即可发布小程序供用户使用。

当创建了小程序项目后,可以按照以下示例代码进行开发:

  1. 在小程序项目的根目录下,找到app.json文件,在其中配置小程序的全局配置信息,如页面路径、窗口样式等。

示例app.json文件内容:

{
  "pages": [
    "pages/index/index",        // 小程序首页
    "pages/about/about",        // 关于页面
    "pages/contact/contact"     // 联系页面
  ],
  "window": {
    "navigationBarTitleText": "我的小程序",  // 导航栏标题文字
    "navigationBarBackgroundColor": "#ffffff"  // 导航栏背景颜色
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于"
      }
    ]
  }
}
  1. 创建小程序的页面文件,每个页面对应一个文件夹,包含一个.js.wxml.wxss.json文件。

示例index.js文件内容:

Page({
  data: {
    message: 'Hello, 小程序!'
  },
  onLoad() {
    console.log('页面加载完成')
  },
  onTap() {
    this.setData({
      message: '点击了按钮'
    })
  }
})

示例index.wxml文件内容:

<view>
  <text>{{ message }}</text>
  <button bindtap="onTap">点击我</button>
</view>

示例index.wxss文件内容:

text {
  font-size: 16px;
  color: #333333;
}
button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #007bff;
  color: #ffffff;
}

示例index.json文件内容(可选,用于配置页面特殊样式):

{
  "navigationBarTitleText": "首页",  // 页面标题
  "enablePullDownRefresh": true  // 允许下拉刷新功能
}

以上代码示例演示了一个简单的小程序页面,其中包含一个文本框、一个按钮,点击按钮后会改变文本框的内容。

通过以上示例,可以开始进行小程序的开发和调试。在微信开发者工具中点击预览按钮,即可在模拟器中查看和测试小程序的效果。

小程序组成结构

JSON配置文件

微信小程序开发中,JSON配置文件是一种用于配置小程序运行环境的文件格式。小程序中常见的JSON配置文件有app.json、page.json、component.json等。

其中,app.json是小程序的全局配置文件,包含了所有页面的路径、窗口样式、网络配置等。其他JSON配置文件则用于指定具体页面或组件的特殊样式和行为。

下面以app.json为例,介绍一些常见的配置选项:

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "小程序示例",
    "navigationBarTextStyle": "black"
  }
}

其中,pages属性指定小程序包含的页面路径列表,这里可能会有多个页面,每个页面需要对应一个.js.wxml.wxss.json文件。

window属性用于指定小程序窗口的样式和配置选项。例如,navigationBarTitleText属性指定导航栏标题文字,navigationBarBackgroundColor属性指定导航栏背景颜色,backgroundTextStyle属性指定下拉动画的样式等。

app.json文件还可以指定小程序的网络配置、分享配置、调试模式等选项。详情可参考微信小程序文档。

JSON配置文件是微信小程序开发中重要的一部分,通过配置文件,可以实现小程序的全局配置、页面配置和组件配置等特性。

app.json

在微信小程序中,app.json是小程序的全局配置文件,用于指定小程序的全局属性和页面路径等信息。

下面介绍一些常见的app.json配置选项:

  1. pages:用于指定小程序包含的所有页面路径列表,每个页面对应一个.js.wxml.wxss.json文件。页面路径是相对于小程序根目录的路径,例如:"pages/index/index"表示根目录下的pages目录中的index页面。
  2. window:用于指定小程序窗口的样式和配置选项,例如navigationBarTitleText属性指定导航栏标题文字,navigationBarBackgroundColor属性指定导航栏背景颜色,backgroundTextStyle属性指定下拉动画的样式等。
  3. tabBar:用于指定小程序底部的选项卡栏,包括选项卡的图标、标题、页面路径等。每个选项卡对应一个页面,用户可以通过点击选项卡切换页面。
  4. networkTimeout:用于指定小程序的网络请求超时时间,单位为毫秒。
  5. debug:用于指定小程序的调试模式,默认为false,开启后会输出更多的调试信息。
  6. permission:用于指定小程序需要使用的系统权限,例如地理位置、摄像头、麦克风等。

以上只是常见的一些配置选项,具体的配置选项可以参考微信小程序文档。

总之,app.json是微信小程序开发中重要的一部分,通过配置app.json文件,可以指定小程序全局属性和页面路径等信息,从而实现小程序的全局配置。

project.config.json

project.config.json是微信小程序项目配置文件,它存储了开发者工具中的一些项目配置信息。这个文件通常位于小程序项目的根目录下。

下面介绍一些常见的project.config.json配置选项:

  1. appid:用于指定小程序的 AppID,即小程序的唯一标识。在创建小程序时会自动生成一个唯一的 AppID。
  2. projectname:用于指定小程序的项目名称。
  3. description:用于指定小程序的描述信息。
  4. compileType:用于指定小程序的编译类型,可以是"miniprogram"(小程序)或"plugin"(插件)。
  5. setting:用于指定开发者工具的一些设置选项,如是否自动打开调试工具、是否生成压缩包等。
  6. packOptions:用于指定小程序打包的一些配置选项,如是否生成 sourcemap 文件、是否对图片进行压缩等。
  7. minGameVersion:用于指定小游戏适配库的最低版本号。

以上只是常见的一些配置选项,实际上project.config.json还可以包含其他的配置选项,具体可参考微信小程序文档。

总之,project.config.json是微信小程序开发中的项目配置文件,通过配置该文件可以设定小程序的一些基本信息和开发工具的行为。

sitemap.json

sitemap.json文件是微信小程序的“小程序搜索”的配置文件,用于向微信服务器提交小程序的页面路径、页面标题、页面参数等信息,以便微信可以将小程序的内容展示在搜索结果中。

sitemap.json文件通常位于小程序项目根目录下,其主要配置选项包括:

  1. rules:用于指定小程序页面的规则。每个规则包含一个name字段和一个page字段,其中name表示页面名称,page表示页面路径。可以使用通配符()指定多个页面,例如"pages/"表示所有的页面均符合该规则。
  2. path:用于指定小程序的首页路径。
  3. items:用于指定小程序的其他页面路径、标题、参数等信息。
  4. recursion:用于指定是否递归查找子页面,默认为false。

以上是sitemap.json文件的一些常见配置选项,具体的配置方式可以参考微信小程序文档。

通过配置sitemap.json文件,可以让微信搜索能够更好地展示小程序的内容,并提高小程序的曝光度和流量。

在微信小程序中,每个页面都需要对应一个.json配置文件,该文件用于指定该页面的一些配置选项和数据。

下面介绍一些常见的.json配置选项:

  1. usingComponents:用于引用该页面所需的自定义组件。可以使用相对路径或绝对路径指定组件所在的位置,例如:“usingComponents”:{“my-component”:"/components/my-component/my-component}"表示引用了一个名为"my-component"的自定义组件。
  2. navigationBarTitleText:用于指定导航栏标题文字。
  3. navigationBarBackgroundColor:用于指定导航栏背景颜色。
  4. backgroundTextStyle:用于指定下拉动画的样式,包括dark(黑色)和light(白色)两种。
  5. backgroundColor:用于指定页面背景颜色。
  6. enablePullDownRefresh:用于指定是否开启下拉刷新功能,默认值为false。
  7. disableScroll:用于指定是否禁止页面滚动,默认值为false。

以上是一些常见的.json配置选项,具体的配置方式可以参考微信小程序文档。

好的,下面给出一个具体例子,假设有个名为“index”的主页页面,那么它对应的.json配置文件可能如下所示:

{
  "navigationBarTitleText": "首页", 
  "navigationBarBackgroundColor": "#ffffff", 
  "usingComponents": {
    "my-component": "/components/my-component/my-component"
  },
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark",
  "disableScroll": false
}

在上述示例中,.json配置文件指定了以下一些属性和配置选项:

  1. navigationBarTitleText: 导航栏标题文字为“首页”;
  2. navigationBarBackgroundColor: 导航栏背景色为白色(#ffffff)
  3. usingComponents: 引用了一个名为my-component的自定义组件,它位于/components/my-component/my-component路径下;
  4. enablePullDownRefresh: 开启下拉刷新功能;
  5. backgroundTextStyle: 下拉动画样式为 dark(黑色);
  6. disableScroll: 默认不禁止页面滚动。

这是一个简单的示例,实际上,.json文件还可以包含许多其他的配置选项,具体的配置方式可以参考微信小程序文档。

目录
相关文章
|
9天前
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
2176 13
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
|
4月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
975 7
|
4月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
930 1
|
30天前
|
JSON 小程序 JavaScript
原生微信小程序笔记完整总结
原生微信小程序笔记完整总结
43 1
|
4月前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
68 0
|
4月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
755 0
|
4月前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
883 0
|
27天前
|
小程序 前端开发 关系型数据库
基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块,提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发,支持多城市、多学校切换,配备分站式后台管理,确保稳定性和安全性。通过融云IM SDK实现即时通讯功能,增强用户互动与粘性。适用于大学校园、城市及社区圈子,满足多样化需求,提升便捷体验。
|
1月前
|
移动开发 小程序 前端开发
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
|
30天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
27 0

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡