https://mister-hope.com/assets/README-DumXwKGJ.js

1import{O as e,P as t,_ as n,b as r,g as i,j as a,m as o,v as s,y as c}from"./app-Dtbj_Jlj.js";import{t as l}from"./plugin-vue_export-helper-BDNMzG2s.js";var u=JSON.parse(`{"path":"/code/mini-app/","title":"小程序","lang":"zh-CN","frontmatter":{"title":"小程序","icon":"mini-app","date":"2019-11-25T00:00:00.000Z","category":"小程序","star":true,"description":"提示 在开发小程序之前。应当掌握 HTML、CSS、JavaScript 基础 以及 ES6。","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"小程序\\",\\"image\\":[\\"https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg\\"],\\"datePublished\\":\\"2019-11-25T00:00:00.000Z\\",\\"dateModified\\":\\"2025-12-12T01:09:00.000Z\\",\\"author\\":[{\\"@type\\":\\"Person\\",\\"name\\":\\"Mr.Hope\\",\\"url\\":\\"https://mister-hope.com\\"}]}"],["meta",{"property":"og:url","content":"https://mister-hope.com/code/mini-app/"}],["meta",{"property":"og:site_name","content":"Mr.Hope"}],["meta",{"property":"og:title","content":"小程序"}],["meta",{"property":"og:description","content":"提示 在开发小程序之前。应当掌握 HTML、CSS、JavaScript 基础 以及 ES6。"}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:image","content":"https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg"}],["meta",{"property":"og:locale","content":"zh-CN"}],["meta",{"property":"og:updated_time","content":"2025-12-12T01:09:00.000Z"}],["meta",{"property":"article:published_time","content":"2019-11-25T00:00:00.000Z"}],["meta",{"property":"article:modified_time","content":"2025-12-12T01:09:00.000Z"}],["link",{"rel":"alternate","type":"application/atom+xml","href":"https://mister-hope.com/atom.xml","title":"Mr.Hope Atom Feed"}],["link",{"rel":"alternate","type":"application/json","href":"https://mister-hope.com/feed.json","title":"Mr.Hope JSON Feed"}],["link",{"rel":"alternate","type":"application/rss+xml","href":"https://mister-hope.com/rss.xml","title":"Mr.Hope RSS Feed"}]]},"git":{"createdTime":1591204114000,"updatedTime":1765501740000,"contributors":[{"name":"Mr.Hope","username":"","email":"[email protected]","commits":14},{"name":"Mister-Hope","username":"Mister-Hope","email":"[email protected]","commits":1,"url":"https://github.com/Mister-Hope"}]},"readingTime":{"minutes":2.62,"words":786},"filePathRelative":"code/mini-app/README.md","excerpt":"<div class=\\"hint-container tip\\">\\n<p class=\\"hint-container-title\\">提示</p>\\n<p>在开发小程序之前。应当掌握 <a href=\\"/code/website/html/\\" target=\\"_blank\\">HTML</a>、<a href=\\"/code/website/css/\\" target=\\"_blank\\">CSS</a>、<a href=\\"/code/language/js/guide/\\" target=\\"_blank\\">JavaScript 基础</a> 以及 <a href=\\"/code/language/js/es6/\\" target=\\"_blank\\">ES6</a>。</p>\\n</div>\\n","autoDesc":true}`),d={name:`README.md`},f={class:`hint-container tip`};function p(l,u,d,p,m,h){let g=a(`RouteLink`),_=a(`Badge`);return e(),n(`div`,null,[o(`div`,f,[u[9]||=o(`p`,{class:`hint-container-title`},`提示`,-1),o(`p`,null,[u[4]||=c(`在开发小程序之前。应当掌握 `,-1),r(g,{to:`/code/website/html/`},{default:t(()=>[...u[0]||=[c(`HTML`,-1)]]),_:1}),u[5]||=c(`、`,-1),r(g,{to:`/code/website/css/`},{default:t(()=>[...u[1]||=[c(`CSS`,-1)]]),_:1}),u[6]||=c(`、`,-1),r(g,{to:`/code/language/js/guide/`},{default:t(()=>[...u[2]||=[c(`JavaScript 基础`,-1)]]),_:1}),u[7]||=c(` 以及 `,-1),r(g,{to:`/code/language/js/es6/`},{default:t(()=>[...u[3]||=[c(`ES6`,-1)]]),_:1}),u[8]||=c(`。`,-1)])]),i(` more `),u[72]||=s(`<h2 id="小程序基础简介" tabindex="-1"><a class="header-anchor" href="#小程序基础简介"><span>小程序基础简介</span></a></h2><p>在微信小程序中主要有四种文件结构: <code>wxml</code>、<code>wxss</code>、<code>js</code> 和 <code>json</code>。其中 <code>wxml</code> 对应带有 vue.js 特征的 html5，<code>wxss</code> 对应 css3，<code>js</code> 对应 ES6 标准的的 javaScript。</p><p>

1对于 QQ 小程序，其文件结构为 <code>QML</code>、<code>qss</code>、<code>js</code> 和 <code>json</code>。</p><div class="hint-container tip"><p class="hint-container-title">提示</p><p>QQ 小程序本质还是换汤不换药的，且 QQ 开发者工具兼容 <code>wxml</code> 与 <code>wss</code>)</p></div><p>小程序开发与网页开发极其相似。所以必须有适当的网页开发基础。零基础的人可能很难直接上手小程序开发。</p><h2 id="教程目录" tabindex="-1"><a class="header-anchor" href="#教程目录"><span>教程目录</span></a></h2>`,6),o(`ul`,null,[o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/file-structure.html`},{default:t(()=>[...u[10]||=[c(`文件结构`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/env.html`},{default:t(()=>[...u[11]||=[c(`运行环境`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/config/`},{default:t(()=>[...u[12]||=[c(`小程序配置`,-1)]]),_:1})]),o(`ul`,null,[o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/config/app-config.html`},{default:t(()=>[...u[13]||=[c(`全局配置`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/config/page-config.html`},{default:t(()=>[...u[14]||=[c(`页面配置`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/config/sitemap-config.html`},{default:t(()=>[...u[15]||=[c(`sitemap 配置`,-1)]]),_:1})])])])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/frame/`},{default:t(()=>[...u[16]||=[c(`小程序框架`,-1)]]),_:1})]),o(`ul`,null,[o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/frame/intro.html`},{default:t(()=>[...u[17]||=[c(`框架介绍`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/frame/scene.html`},{default:t(()=>[...u[18]||=[c(`场景值`,-1)]]),_:1}),u[19]||=c(),r(_,{type:`grey`,text:`高级`})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/frame/env.html`},{default:t(()=>[...u[20]||=[c(`运行环境`,-1)]]),_:1}),u[21]||=c(),r(_,{type:`grey`,text:`高级`})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/frame/mechanism.html`},{default:t(()=>[...u[22]||=[c(`运行机制`,-1)]]),_:1}),u[23]||=c(),r(_,{type:`grey`,text:`高级`})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/frame/update.html`},{default:t(()=>[...u[24]||=[c(`更新机制`,-1)]]),_:1}),u[25]||=c(),r(_,{type:`grey`,text:`高级`})])])])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/service/`},{default:t(()=>[...u[26]||=[c(`逻辑层`,-1)]]),_:1})]),o(`ul`,null,[o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/service/lifetime.html`},{default:t(()=>[...u[27]||=[c(`生命周期`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/service/route.html`},{default:t(()=>[...u[28]||=[c(`路由`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/service/register.html`},{default:t(()=>[...u[29]||=[c(`注册`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/service/app.html`},{default:t(()=>[...u[30]||=[c(`App()`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/service/page.html`},{default:t(()=>[...u[31]||=[c(`Page()`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/service/run.html`},{default:t(()=>[...u[32]||=[c(`运行`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/service/module.html`},{default:t(()=>[...u[33]||=[c(`模块化`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/service/api/`},{default:t(()=>[...u[34]||=[c(`API`,-1)]]),_:1})])])])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/view/`},{default:t(()=>[...u[35]||=[c(`视图层`,-1)]]),_:1})]),o(`ul`,null,[o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/view/wxml.html`},{default:t(()=>[...u[36]||=[c(`WXML`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/view/wxss.html`},{default:t(()=>[...u[37]||=[c(`WXSS`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/view/wxs.html`},{default:t(()=>[...u[38]||=[c(`WXS`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/view/event.html`},{default:t(()=>[...u[39]||=[c(`事件`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/view/component.html`},{default:t(()=>[...u[40]||=[c(`基础组件`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/view/animation.html`},{default:t(()=>[...u[41]||=[c(`动画`,-1)]]),_:1}),u[42]||=c(),r(_,{type:`grey`,text:`高级`})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/view/wxs.html`},{default:t(()=>[...u[43]||=[c(`WXS`,-1)]]),_:1}),u[44]||=c(),r(_,{type:`grey`,text:`高级`})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/view/wxs-event.html`},{default:t(()=>[...u[45]||=[c(`WXS 事件`,-1)]]),_:1}),u[46]||=c(),r(_,{type:`grey`,text:`高级`})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/view/model.html`},{default:t(()=>[...u[47]||=[c(`建议双向绑定`,-1)]]),_:1}),u[48]||=c(),r(_,{type:`grey`,text:`高级`})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/view/selector.html`},{default:t(()=>[...u[49]||=[c(`获取界面上的节点信息`,-1)]]),_:1}),u[50]||=c(),r(_,{type:`grey`,text:`高级`})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/view/selector.html`},{default:t(()=>[...u[51]||=[c(`相应显示区域变化`,-1)]]),_:1}),u[52]||=c(),r(_,{type:`grey`,text:`高级`})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/view/rendering-cache.html`},{default:t(()=>[...u[53]||=[c(`初始渲染缓存`,-1)]]),_:1}),u[54]||=c(),r(_,{type:`grey`,text:`高级`})])])])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/ability/`},{default:t(()=>[...u[55]||=[c(`小程序能力`,-1)]]),_:1})]),o(`ul`,null,[o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/ability/network.html`},{default:t(()=>[...u[56]||=[c(`网络请求`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/ability/storage.html`},{default:t(()=>[...u[57]||=[c(`存储`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/ability/file-system.html`},{default:t(()=>[...u[58]||=[c(`文件系统`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/guide/ability/debug.html`},{default:t(()=>[...u[59]||=[c(`调试`,-1)]]),_:1})])])])])]),u[73]||=o(`h2`,{id:`开发者工具`,tabindex:`-1`},[o(`a`,{class:`header-anchor`,href:`#开发者工具`},[o(`span`,null,`开发者工具`)])],-1),o(`ul`,null,[o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/tools/interface.html`},{default:t(()=>[...u[60]||=[c(`工具界面简介`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/tools/debug.html`},{default:t(()=>[...u[61]||=[c(`调试`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/tools/npm.html`},{default:t(()=>[...u[62]||=[c(`npm`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/tools/audit.html`},{default:t(()=>[...u[63]||=[c(`体验评分`,-1)]]),_:1})])])]),u[74]||=s(`<h2 id="官方教程" tabindex="-1"><a class="header-anchor" href="#官方教程"><span>官方教程</span></a></h2><ul><li><a href="https://developers.weixin.qq.com/ebook?action=get_post_info&amp;docid=0008aeea9a8978ab0086a685851c0a" target="_blank" rel="noopener noreferrer">点击前往</a></li></ul><h2 id="案例" tabindex="-1"><a class="header-anchor" href="#案例"><span>案例</span></a></h2><ul><li><a href="https://github.com/Hope-Studio/wxminiappdemo" target="_blank" rel="noopener noreferrer">GitHub repository</a></li></ul><h2 id="mr-hope-框架说明" tabindex="-1"><a class="header-anchor" href="#mr-hope-框架说明"><span>Mr.Hope 框架说明</span></a></h2>`,5),o(`ul`,null,[o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/framework/`},{default:t(()=>

1[...u[64]||=[c(`小程序框架使用说明`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/framework/tag-list.html`},{default:t(()=>[...u[65]||=[c(`tag 值参数表`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/framework/page.html`},{default:t(()=>[...u[66]||=[c(`setPage 库使用说明`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/framework/simple-debug.html`},{default:t(()=>[...u[67]||=[c(`界面简单开发学习指南`,-1)]]),_:1})])]),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/qr-code.html`},{default:t(()=>[...u[68]||=[c(`分享相关`,-1)]]),_:1})])])]),u[75]||=s(`<h2 id="学习视频" tabindex="-1"><a class="header-anchor" href="#学习视频"><span>学习视频</span></a></h2><ul><li><p><a href="https://www.bilibili.com/video/av22790583/" target="_blank" rel="noopener noreferrer">零基础开发小程序</a>(比较新的视频，强调总体思想)</p></li><li><p><a href="https://www.bilibili.com/video/av11938917" target="_blank" rel="noopener noreferrer">小程序-从入门到入土</a>(比较老的视频，针对每个组件或者 API 进行了针对的讲解与示范，但部分内容已经与最新官方文档不符)</p></li></ul><h2 id="示例代码" tabindex="-1"><a class="header-anchor" href="#示例代码"><span>示例代码</span></a></h2><ul><li><p><a href="https://github.com/wechat-miniprogram/miniprogram-demo" target="_blank" rel="noopener noreferrer">小程序实例源码</a></p><figure><img src="https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg" alt="小程序示例二维码" tabindex="0" loading="lazy"><figcaption>小程序示例二维码</figcaption></figure></li></ul><h2 id="官方文档" tabindex="-1"><a class="header-anchor" href="#官方文档"><span>官方文档</span></a></h2><ul><li><a href="https://q.qq.com/wiki/" target="_blank" rel="noopener noreferrer">QQ 小程序</a></li><li><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer">微信小程序</a></li><li><a href="https://developers.weixin.qq.com/community/develop/question" target="_blank" rel="noopener noreferrer">微信小程序社区</a><ul><li><a href="https://developers.weixin.qq.com/community/develop/list/2?id=" target="_blank" rel="noopener noreferrer">官方公告</a></li></ul></li></ul><h3 id="qq-开发者工具" tabindex="-1"><a class="header-anchor" href="#qq-开发者工具"><span>QQ 开发者工具</span></a></h3><p>现在很多功能还处于缺失状态，bug 到没之前那么多了。</p><ul><li><p><a href="https://q.qq.com/wiki/" target="_blank" rel="noopener noreferrer">查看详情</a></p></li><li><p><a href="https://q.qq.com/wiki/tools/devtool/" target="_blank" rel="noopener noreferrer">下载地址</a></p></li></ul><h2 id="微信开发者工具" tabindex="-1"><a class="header-anchor" href="#微信开发者工具"><span>微信开发者工具</span></a></h2><p>微信开发者工具用来开发与调试微信小程序和微信相关网页的官方工具。小程序使用该开发工具进行开发。</p>`,11),o(`ul`,null,[u[70]||=o(`li`,null,[o(`p`,null,[o(`a`,{href:`https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html`,target:`_blank`,rel:`noopener noreferrer`},`下载地址`)])],-1),o(`li`,null,[o(`p`,null,[r(g,{to:`/code/mini-app/tools/`},{default:t(()=>[...u[69]||=[c(`开发者工具教程`,-1)]]),_:1})])]),u[71]||=o(`li`,null,[o(`p`,null,[o(`a`,{href:`https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html`,target:`_blank`,rel:`noopener noreferrer`},`官方使用指南`)])],-1)])])}var m=l(d,[[`render`,p]]);export{u as _pageData,m as default};