宋你一辆迈凯轮 發表於 2021-9-28 09:44:00

微信小程序开发指南

<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>一、介绍<ul><li>小程序与普通网页开发区别</li><li>小程序与传统App区别</li><li>小程序框架结构</li></ul></li><li>二、开发前准备工作<ul><li>申请账号与登录设置</li><li>获取APPID</li><li>下载</li><li>设置代理</li><li>创建第一个项目</li></ul></li><li>三、项目文件结构与配置<ul><li>文件结构</li><li>配置</li></ul></li><li>三、基本语法<ul><li>视图结构 wxml<ul><li>1、数据绑定</li><li>2、setData修改数据源数值</li><li>3、for循环列表渲染</li><li>4、if条件渲染</li><li>5、模块引用（包含）</li></ul></li><li>样式wxss<ul><li>新增了尺寸单位</li><li>提供了全局的样式和局部样式</li><li>支持部分 CSS 选择器</li></ul></li><li>page生命周期</li></ul></li><li>四、事件<ul><li>事件绑定</li><li>事件对象</li></ul></li><li>五、组件<ul><li>组件全部的生命周期函数</li><li>属性值</li><li>共同属性</li><li>自定义组件</li><li>组建通信<ul><li>父---&gt;子通信</li><li>子集---&gt;父级</li></ul></li></ul></li><li>六、WXS模块</li><li>七、网络请求</li><li>八、 缓存</li></ul></div><p></p>
<h1 id="一介绍">一、介绍</h1>
<p>官网<br>
微信小程序，简称小程序，英文名 MiniProgram，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，对于用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。对于开发者而言，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用。</p>
<h2 id="小程序与普通网页开发区别">小程序与普通网页开发区别</h2>
<ul>
<li>
<p>小程序</p>
<ul>
<li>依赖于微信或其他APP上的一个应用形式，无法脱离其所在的APP</li>
<li>在特定的环境中去开发，所用的组件、UI都是确定好了的，也不用去考虑兼容问题</li>
<li>在速度上，小程序基于APP端去实现，在使用时就感到很流畅</li>
</ul>
</li>
<li>
<p>普通网页</p>
<ul>
<li>网页开发用在移动端或者PC端的网页开发技术</li>
<li>开发时会有开发工具的选择、框架的选择、UI的选择等问题，还要兼顾到浏览器是否兼容的问题</li>
<li>网页在不同的浏览器或设备中解析加载会比较慢一些</li>
<li>网页运行在浏览器中，当然有一些App内嵌了浏览器也是可以运行的</li>
<li>网页是需要通过网址来进行访问的</li>
</ul>
</li>
</ul>
<h2 id="小程序与传统app区别">小程序与传统App区别</h2>
<ul>
<li>小程序
<ul>
<li>依赖于微信或其他APP上的一个应用形式，无法脱离其所在的APP</li>
<li>无需要安装，开发技术要求较低，无需考虑应用兼容适配问题</li>
</ul>
</li>
<li>传统App：
<ul>
<li>独立运行，不需要依赖于谁</li>
<li>需要用户安装，开发技术要求较高且开发时还需要解决设备兼容适配问题</li>
</ul>
</li>
</ul>
<h2 id="小程序框架结构">小程序框架结构</h2>
<ul>
<li>整个小程序框架系统分为两部分：逻辑层(JavaScript) 和 视图层(WXML 和 WXSS)。</li>
<li>在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。</li>
<li>只需要在逻辑层更改数据，视图层内容就会相应更新。<br>
<img src="https://img2020.cnblogs.com/blog/1731300/202109/1731300-20210927140832968-387070399.png" alt="" loading="lazy"></li>
</ul>
<h1 id="二开发前准备工作">二、开发前准备工作</h1>
<h2 id="申请账号与登录设置">申请账号与登录设置</h2>
<p>官网</p>
<h2 id="获取appid">获取APPID</h2>
<p>appID作为小程序的身份的唯一标识，识别当前开发或运行在哪个小程序上面。<br>
<img src="https://img2020.cnblogs.com/blog/1731300/202201/1731300-20220113171035157-1532085886.png" alt="" loading="lazy"></p>
<h2 id="下载">下载</h2>
<p>推荐下载和安装最新的稳定版（Stable Build）的微信开发者工具，下载页面的链接如下：<br>
https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html<br>
<img src="https://img2020.cnblogs.com/blog/1731300/202201/1731300-20220113171039964-2040794021.png" alt="" loading="lazy"></p>
<h2 id="设置代理">设置代理</h2>
<p>目的是避免电脑上安装其他软件改变代理地址，影响开发<br>
<img src="https://img2020.cnblogs.com/blog/1731300/202201/1731300-20220113171548498-1836041823.jpg" alt="" loading="lazy"></p>
<h2 id="创建第一个项目">创建第一个项目</h2>
<ol>
<li>点击小程序---》点击+号</li>
<li>设置项目名称</li>
<li>设置存放地址</li>
<li>设置APPID</li>
<li>选择不使用云开发</li>
<li>选择开发语言</li>
<li>确认<br>
<img src="https://img2020.cnblogs.com/blog/1731300/202201/1731300-20220113171913553-1303994422.jpg" alt="" loading="lazy"></li>
</ol>
<h1 id="三项目文件结构与配置">三、项目文件结构与配置</h1>
<h2 id="文件结构">文件结构</h2>
<p><img src="https://img2020.cnblogs.com/blog/1731300/202109/1731300-20210927140200461-795265353.jpg" alt="" loading="lazy"><br>
<strong>1.文件主体结构</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">文件</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">app.js</td>
<td style="text-align: left">是</td>
<td style="text-align: left">小程序逻辑-小程序入口文件</td>
</tr>
<tr>
<td style="text-align: left">app.json</td>
<td style="text-align: left">是</td>
<td style="text-align: left">小程序公共配置文件</td>
</tr>
<tr>
<td style="text-align: left">app.wxss</td>
<td style="text-align: left">否</td>
<td style="text-align: left">小程序公共样式表</td>
</tr>
</tbody>
</table>
<p><strong>2. 页面结构</strong></p>
<p>一个小程序page页面由四个文件组成，分别是：</p>
<table>
<thead>
<tr>
<th style="text-align: left">文件</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">js</td>
<td style="text-align: left">是</td>
<td style="text-align: left">页面逻辑</td>
</tr>
<tr>
<td style="text-align: left">wxml</td>
<td style="text-align: left">是</td>
<td style="text-align: left">页面结构</td>
</tr>
<tr>
<td style="text-align: left">wxss</td>
<td style="text-align: left">否</td>
<td style="text-align: left">页面样式表</td>
</tr>
<tr>
<td style="text-align: left">json</td>
<td style="text-align: left">否</td>
<td style="text-align: left">页面配置</td>
</tr>
</tbody>
</table>
<p><strong>3. sitemap 配置</strong><br>
<strong>4. project.config.json</strong><br>
编辑器配置，项目中我们可以操作编辑器来动态修改project配置，不用我们去死记硬背哪些配置相关单词.<br>
<img src="https://img2020.cnblogs.com/blog/1731300/202109/1731300-20210927140613200-585780196.jpg" alt="图片替换文本" width="500" height="313" align="center"></p>
<h2 id="配置">配置</h2>
<p>app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。<br>
<strong>注意点：</strong></p>
<ol>
<li><font color="red">app.json中不能添加任何注释。</font></li>
<li><font color="red">key和value字符串必须用双引号引起来。</font></li>
<li><font color="red">数组或对象最后一位不能有逗号。</font></li>
</ol>
<pre><code>{
"pages":[
    "pages/index/index",
    "pages/logs/logs"
],
"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
},
"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
},
"networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
},
"debug": true
"style": "v2",
"sitemapLocation": "sitemap.json"
}
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: center">字段</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">debug</td>
<td style="text-align: left">debug调试是否开启</td>
</tr>
<tr>
<td style="text-align: center">pages</td>
<td style="text-align: left">注册小程序的页面路径列表</td>
</tr>
<tr>
<td style="text-align: center">-</td>
<td style="text-align: left">数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。</td>
</tr>
<tr>
<td style="text-align: center">window</td>
<td style="text-align: left">全局的默认窗口表现</td>
</tr>
<tr>
<td style="text-align: center">-</td>
<td style="text-align: left">用于设置小程序的状态栏、导航条、标题、窗口背景色</td>
</tr>
<tr>
<td style="text-align: center">tabBar</td>
<td style="text-align: left">小程序底部或顶部菜单定义</td>
</tr>
<tr>
<td style="text-align: center">networkTimeout</td>
<td style="text-align: left">小程序网络请求超时时间设置</td>
</tr>
<tr>
<td style="text-align: center">usingComponents</td>
<td style="text-align: left">自定义组件配置</td>
</tr>
</tbody>
</table>
<h1 id="三基本语法">三、基本语法</h1>
<h2 id="视图结构-wxml">视图结构 wxml</h2>
<p>WXML是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。<br>
wxml是一个严格的标记性语言，有开始就必须有结束，单标签就一个有结束符。</p>
<h3 id="1数据绑定">1、数据绑定</h3>
<p>语法：{{}}<br>
在js逻辑层中定义数据源，在wxml通过插值表达式调用定义好的数据源中数据</p>
<pre><code>&lt;!-- wxml --&gt;
&lt;view&gt;{{message}}&lt;/view&gt;
&lt;image srcc='{{src}}' /&gt;
</code></pre>
<pre><code>&lt;!-- page.js --&gt;
page({
    data:{
      message:'ajgsdh',
      src:'sasd'
    }
})
</code></pre>
<h3 id="2setdata修改数据源数值">2、setData修改数据源数值</h3>
<p>语法：setData<br>
通过一个setData方法来进行后续数据源数据的修改工作。<br>
注意：this的指向问题，setData是当前页面对象中的方法。</p>
<pre><code>&lt;!-- page.js --&gt;
onLoad(){
    setTimeout(()=&gt;{
      this.setData({message:'你好'})
    })
}
</code></pre>
<h3 id="3for循环列表渲染">3、for循环列表渲染</h3>
<p>语法：wx:for</p>
<ul>
<li>wx:for-index：指定数组当前下标的变量名（默认index）</li>
<li>wx:fpr-item：指定数组当前元素变量名（默认item）</li>
<li>wx:key：唯一标识符（提高性能，可定义也可以不定义）</li>
</ul>
<pre><code>data:{
    users:['张三','李四'],
    objArr:[
      {id:1,name:'搜索'},
      {id:2,name:'地方'}
    ]
}
</code></pre>
<pre><code>用法一
&lt;view wx:for='{{users}}' wx:key='{{index}}'&gt;{{item}}--{{index}}&lt;/view&gt;
用法二
&lt;view wx:for='{{users}}' wx:for-index='key' wx:for-item='val' wx:key='{{key}}'&gt;{{val}}--{{key}}&lt;/view&gt;
用法三
&lt;view wx:for='{{objArr}}' wx:key='{{item.id}}'&gt;{{item}}--{{index}}&lt;/view&gt;
</code></pre>
<h3 id="4if条件渲染">4、if条件渲染</h3>
<p>语法：wx:if<br>
在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块<br>
也可以用 wx:elif 和 wx:else 来添加一个 else 块</p>
<pre><code>&lt;view wx:if='{{age&lt;10&gt;}}'&gt;青年&lt;/view&gt;
&lt;view wx:elif='{{age&lt;20&gt;}}'&gt;少年&lt;/view&gt;
&lt;view wx:else&gt;ss&lt;/view&gt;
</code></pre>
<h3 id="5模块引用包含">5、模块引用（包含）</h3>
<p>WXML 提供两种文件引用方式：import和include        <br>
<strong>1）import</strong></p>
<ol>
<li>在user.wxml中定义一个item的template</li>
</ol>
<pre><code>&lt;template name="user"&gt;
&lt;text&gt;{{title}}&lt;/text&gt;
&lt;/template&gt;
</code></pre>
<p>注意：<font color="red"> name template定义的模板名称，一个文件中可以定义多个template但name的名称不能重复</font></p>
<ol start="2">
<li>在 index.wxml 中引用了 item.wxml，就可以使用item模板</li>
</ol>
<pre><code>&lt;import src="item.wxml"/&gt;
&lt;template is="item" data="{{title: '你好世界'}}"/&gt;
</code></pre>
<p>注意：</p>
<ul>
<li>is ：指定定义存在好的模板名称。</li>
<li>data ：向模板中传数据</li>
</ul>
<p><strong>2）include</strong><br>
把引入的文件内容直接复制到目录文件中。<br>
template 不生效</p>
<pre><code>&lt;include src="header.wxml"/&gt;
&lt;view&gt; body &lt;/view&gt;
&lt;include src="footer.wxml"/&gt;
</code></pre>
<h2 id="样式wxss">样式wxss</h2>
<p>WXSS是一套样式语言，用于描述 WXML 的组件样式。WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。</p>
<h3 id="新增了尺寸单位">新增了尺寸单位</h3>
<p>WXSS 在底层支持新的尺寸单位 rpx响应式尺寸单位<br>
小程序中全屏尺寸数值是 : 750rpx</p>
<h3 id="提供了全局的样式和局部样式">提供了全局的样式和局部样式</h3>
<p>定义在 app.wxss 中的样式为全局样式，作用于每一个页面。<br>
在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。</p>
<h3 id="支持部分-css-选择器">支持部分 CSS 选择器</h3>
<table>
<thead>
<tr>
<th style="text-align: left">选择器</th>
<th style="text-align: left">样例</th>
<th style="text-align: left">样例描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">.class</td>
<td style="text-align: left">.intro</td>
<td style="text-align: left">选择所有拥有 class="intro" 的组件</td>
</tr>
<tr>
<td style="text-align: left">#id</td>
<td style="text-align: left">#firstname</td>
<td style="text-align: left">选择拥有 id="firstname" 的组件</td>
</tr>
<tr>
<td style="text-align: left">element</td>
<td style="text-align: left">view</td>
<td style="text-align: left">选择所有 view 组件</td>
</tr>
<tr>
<td style="text-align: left">element, element</td>
<td style="text-align: left">view, checkbox</td>
<td style="text-align: left">选择所有文档的 view 组件和所有的 checkbox 组件</td>
</tr>
<tr>
<td style="text-align: left">::after</td>
<td style="text-align: left">view::after</td>
<td style="text-align: left">在 view 组件后边插入内容</td>
</tr>
<tr>
<td style="text-align: left">::before</td>
<td style="text-align: left">view::before</td>
<td style="text-align: left">在 view 组件前边插入内容</td>
</tr>
</tbody>
</table>
<h2 id="page生命周期">page生命周期</h2>
<p>小程序数据互交就是通过不同的事件函数来完成的，了解生命周期函数，对于以后的数据交互是非常重要的。</p>
<table>
<thead>
<tr>
<th style="text-align: left">名称</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">onLoad(options)</td>
<td style="text-align: left">页面加载时触发，可获取路径中的参数(1)</td>
</tr>
<tr>
<td style="text-align: left">onReady()</td>
<td style="text-align: left">页面渲染完成(1)</td>
</tr>
<tr>
<td style="text-align: left">onShow()</td>
<td style="text-align: left">页面显示/切入前台触发(N)</td>
</tr>
<tr>
<td style="text-align: left">onHide()</td>
<td style="text-align: left">页面隐藏/切入后台时触发(N)</td>
</tr>
<tr>
<td style="text-align: left">onPullDownRefresh()</td>
<td style="text-align: left">监听用户下拉动作，此事件需要在app.json文件中window节点中"开启全局的下拉刷新"enablePullDownRefresh":true,才能触发它</td>
</tr>
<tr>
<td style="text-align: left">onReachBottom()</td>
<td style="text-align: left">上拉触底事件，需要当前页内容超过一屏幕</td>
</tr>
<tr>
<td style="text-align: left">onPageScroll()</td>
<td style="text-align: left">滚动事件</td>
</tr>
<tr>
<td style="text-align: left">onShareAppMessage()</td>
<td style="text-align: left">自定义分享</td>
</tr>
<tr>
<td style="text-align: left">onUnload()</td>
<td style="text-align: left">页面卸载</td>
</tr>
</tbody>
</table>
<h1 id="四事件">四、事件</h1>
<h2 id="事件绑定">事件绑定</h2>
<p>语法：bind:事件名='方法名'、catch:事件名='方法名'<br>
<strong>注意：</strong>次奥程序中绑定&lt;/font color='red'&gt;方法名不能用小括号()，直接写方法名称即可<br>
bind：冒泡事件<br>
catch：非冒泡事件<br>
原生组件：camera、canvas、live-player、live-pusher、video、map、textarea、input<br>
非原生组件：bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap='方法名'</p>
<pre><code>&lt;view bind:touchstart='start' bind:touchedn='end'&gt;&lt;/view&gt;
&lt;view bind:touchstart='click2' &gt;&lt;/view&gt;
</code></pre>
<pre><code>click2(){}
...
</code></pre>
<h2 id="事件对象">事件对象</h2>
<p>BaseEvent 基础事件对象属性列表</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">type</td>
<td style="text-align: left">string</td>
<td style="text-align: left">事件类型</td>
</tr>
<tr>
<td style="text-align: left">timeStamp</td>
<td style="text-align: left">Integer</td>
<td style="text-align: left">事件生成的时间戳</td>
</tr>
<tr>
<td style="text-align: left">target</td>
<td style="text-align: left">Object</td>
<td style="text-align: left">触发事件的组件的一些属性值集合 data-开头定义的属性</td>
</tr>
<tr>
<td style="text-align: left">currentTarget</td>
<td style="text-align: left">Object</td>
<td style="text-align: left">当前组件的一些属性值集合（对象）在组件中data-开头定义的属性</td>
</tr>
</tbody>
</table>
<pre><code>getSomeData(evt){
    console.log(evt.type,'cc') //类型
    console.log(evt.timeStamp,Date.now(),'dd') //时间
    console.log(evt.target,'ee')//属性
    console.log(evt.currentTarget,'ff') //属性
}
</code></pre>
<h1 id="五组件">五、组件</h1>
<p>组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之间。</p>
<h2 id="组件全部的生命周期函数">组件全部的生命周期函数</h2>
<table>
<thead>
<tr>
<th style="text-align: left">生命周期函数</th>
<th style="text-align: left">参数</th>
<th style="text-align: left">描述说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">created</td>
<td style="text-align: left">无</td>
<td style="text-align: left">在组件实例刚刚被创建时执行</td>
</tr>
<tr>
<td style="text-align: left">attached</td>
<td style="text-align: left">无</td>
<td style="text-align: left">在组件实例进入页面节点树时执行</td>
</tr>
<tr>
<td style="text-align: left">ready</td>
<td style="text-align: left">无</td>
<td style="text-align: left">在组件在视图层布局完成后执行</td>
</tr>
<tr>
<td style="text-align: left">moved</td>
<td style="text-align: left">无</td>
<td style="text-align: left">在组件实例被移动到节点树另一个位置时执行</td>
</tr>
<tr>
<td style="text-align: left">detached</td>
<td style="text-align: left">无</td>
<td style="text-align: left">在组件实例被从页面节点树移除时执行</td>
</tr>
<tr>
<td style="text-align: left">error</td>
<td style="text-align: left">Object Error</td>
<td style="text-align: left">每当组件方法抛出错误时执行</td>
</tr>
</tbody>
</table>
<h2 id="属性值">属性值</h2>
<table>
<thead>
<tr>
<th style="text-align: left">类型</th>
<th style="text-align: left">描述</th>
<th style="text-align: left">注解</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">Boolean</td>
<td style="text-align: left">布尔值</td>
<td style="text-align: left">组件写上该属性，不管该属性等于什么，其值都为true，只有组件上没有写该属性时，属性值才为false。如果属性值为变量，变量的值会被转换为Boolean类型{</td>
</tr>
<tr>
<td style="text-align: left">Number</td>
<td style="text-align: left">数字</td>
<td style="text-align: left">1, 2.5{</td>
</tr>
<tr>
<td style="text-align: left">String</td>
<td style="text-align: left">字符串</td>
<td style="text-align: left">"string"</td>
</tr>
<tr>
<td style="text-align: left">Array</td>
<td style="text-align: left">数组</td>
<td style="text-align: left">[ 1, "string" ]{</td>
</tr>
<tr>
<td style="text-align: left">Object</td>
<td style="text-align: left">对象</td>
<td style="text-align: left">{ key: value }{</td>
</tr>
<tr>
<td style="text-align: left">EventHandler</td>
<td style="text-align: left">事件处理函数名</td>
<td style="text-align: left">"handlerName" 是 Page中定义的事件处理函数名</td>
</tr>
</tbody>
</table>
<h2 id="共同属性">共同属性</h2>
<table>
<thead>
<tr>
<th style="text-align: left">属性名</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">描述</th>
<th style="text-align: left">注解</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">id</td>
<td style="text-align: left">String</td>
<td style="text-align: left">组件的唯一标示</td>
<td style="text-align: left">保持整个页面唯一</td>
</tr>
<tr>
<td style="text-align: left">class</td>
<td style="text-align: left">String</td>
<td style="text-align: left">组件的样式类</td>
<td style="text-align: left">在对应的 WXSS 中定义的样式类</td>
</tr>
<tr>
<td style="text-align: left">style</td>
<td style="text-align: left">String</td>
<td style="text-align: left">组件的内联样式</td>
<td style="text-align: left">可以动态设置的内联样式</td>
</tr>
<tr>
<td style="text-align: left">hidden</td>
<td style="text-align: left">Boolean </td>
<td style="text-align: left">组件是否显示</td>
<td style="text-align: left">所有组件默认显示</td>
</tr>
<tr>
<td style="text-align: left">data-*</td>
<td style="text-align: left">Any</td>
<td style="text-align: left">自定义属性</td>
<td style="text-align: left">组件上触发的事件时，会发送给事件处理函数</td>
</tr>
<tr>
<td style="text-align: left">bind* / catch*</td>
<td style="text-align: left">EventHandler</td>
<td style="text-align: left">组件的事件</td>
<td style="text-align: left">详见事件</td>
</tr>
<tr>
<td style="text-align: left">tab切换</td>
<td style="text-align: left"></td>
<td style="text-align: left"></td>
<td style="text-align: left"></td>
</tr>
</tbody>
</table>
<pre><code>&lt;view class='nav'&gt;
    &lt;view class='{{css}}' data-index='{{0}}' bind:tap='tabfn'&gt;栏目一&lt;/view&gt;
    &lt;view class='{{css}}' data-index='{{1}}' bind:tap='tabfn'&gt;栏目二&lt;/view&gt;
&lt;/view&gt;
&lt;view class='cnt'&gt;
    &lt;view hidden='{{isshow}}'&gt;&lt;/view&gt;
    &lt;view hidden={{isshow}}&gt;&lt;/view&gt;
&lt;/view&gt;
</code></pre>
<pre><code>Page({
    data:{
      css:['now',''],
      isshow:
    },
    tabfun(event){
      let index=event.target.dataset.index //获取data-*传值
      let css=this.data.css
      let isshow=this.data.isshow.mao((item,key)=&gt;{
            css=''
            return true
      })
      css='now'
      isshow=false
      this.setData({isshow,css})
    }
})
</code></pre>
<h2 id="自定义组件">自定义组件</h2>
<p><img src="https://img2020.cnblogs.com/blog/1731300/202109/1731300-20210927140653853-1789993324.jpg" alt="" loading="lazy"></p>
<ol>
<li>新加组件(工具新加component)</li>
<li>需要引入组件的页面配置文件 json中定义 name path，<pre><code>{
    "usingComponents": {
      // 在父模板中调用的标签名    组件的路径
      "com-name": "path/to/the/custom/component"
    }
}
</code></pre>
</li>
<li>页面中调用组件<pre><code>&lt;com-name&gt;
</code></pre>
</li>
</ol>
<h2 id="组建通信">组建通信</h2>
<h3 id="父---子通信">父---&gt;子通信</h3>
<p>原理：类似于vue自定义属性--properties接收<br>
父级:</p>
<pre><code>&lt;com-name name='测试'&gt;
</code></pre>
<p>子集:</p>
<pre><code>properties:{
    name:{
      type:String,
      optionalTypes:
      value:'123'
    }
}
</code></pre>
<h3 id="子集---父级">子集---&gt;父级</h3>
<p>原理：类似于vue   自定义事件并（triggerEvent）传递---evt.detail<br>
子集：</p>
<pre><code>&lt;view data-name='son' bind:Tap='sonClick'&gt;&lt;/view&gt;
</code></pre>
<pre><code>sonClick(evt){
    let name=evt.target.dataset.name
    this.triggerEvent('getName',{name},false)
}
</code></pre>
<p>父级:</p>
<pre><code>&lt;com-name bind:getName='click'/&gt;
</code></pre>
<pre><code>click(evt){![](https://img2020.cnblogs.com/blog/1731300/202109/1731300-20210927140557579-1531021586.jpg)

    let name=evt.detail
}
</code></pre>
<h1 id="六wxs模块">六、WXS模块</h1>
<ul>
<li>WXS（WeiXin Script）：是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。</li>
<li>WXS：中定义的函数可以在wxml文件中使用，可以用它来当过滤器使用。</li>
<li>WXS：以.wxs扩展名结尾，文件中代码写法和JS类似，不支持ES6写法</li>
<li>WXS：不是js（wxs只支持部份js语法）</li>
</ul>
<p>写法与js类似，不支持ES6<br>
<strong>创建wxs模块</strong><br>
tools.wxs</p>
<pre><code>function mysub(str,len){
    return ...
}
module.exports={
    mysub:mysub
}
</code></pre>
<p><strong>调用</strong><br>
在wxml文件去引用<br>
引用的时候一定要用相对应地址<br>
每个 wxs 模块均有一个内置的 module 对象。</p>
<pre><code>&lt;wxs src='../../tools.wxs' module='tools'/&gt;
&lt;view&gt;tools.mysub('hfghaf')&lt;/view&gt;
</code></pre>
<h1 id="七网络请求">七、网络请求</h1>
<p>wx.request(OBJECT)</p>
<ul>
<li>发起 HTTPS 网络请求,上线时一定要有https服务器，但在本机开发时可以没有https服务器</li>
<li>测试支持的并数请求数5个</li>
<li>HTTPS 证书必须有效 而且是TLS1.2及以上版本</li>
<li>最好要设置一下 app.json中request请求的超时时间</li>
</ul>
<ol>
<li>设置请求超时时间<pre><code>&lt;!-- app.json --&gt;
"networkTimeout":{
    "request":10000
}
</code></pre>
</li>
<li>封装请求<pre><code>&lt;!-- http.js --&gt;
const http = ({url,data={},method='Get',header={}})=&gt;{
    wx.showLoading({
      title:'加载中'
    })
    return new Promise((resolve,reject)=&gt;{
      wx.request({
            url,
            method,
            success:res=&gt;{
                resolve(res)
            },
            fail:()=&gt;{
                reject('fail')
            },
            complete:()=&gt;{
                wx.hideLoading()
            }
      })
    })
}
</code></pre>
</li>
<li>配置请求地址<pre><code> &lt;!-- config uri.js --&gt;
const host = 'http://localhost/api/v1'
export default {
   new:'${host}/news'
}
</code></pre>
</li>
<li>请求模型<pre><code>&lt;!-- models newsModels.js --&gt;
import http from '../utils/http'
import config from '../config/uri'
// 获取新闻列表
export const getNew=(page=1)=&gt;{
    return http({
      url:config.news
    })
}
</code></pre>
</li>
<li>调用<pre><code>import {getNews} from '../../models/newsModel'
getNews().then(res=&gt;{
    this.setData({
      news:res.data
    })
})
</code></pre>
</li>
</ol>
<h1 id="八-缓存">八、 缓存</h1>
<p>小程序是有缓存的，但是它缓存<font color="red">没有过期时间，单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB</font>。<br>
如果缓存达到了上限，清除缓存，清除缓存机制：最久未被使用。<br>
重要的数据不要放在小程序缓存中。</p>
<pre><code>/*
    添加缓存封装
*/
var dtime = '_deadtime';

function put(k, v, t) {
    wx.setStorageSync(k, v)
    var seconds = parseInt(t);
    if (seconds &gt; 0) {
      var timestamp = Date.parse(new Date());
      timestamp = timestamp / 1000 + seconds;
      wx.setStorageSync(k + dtime, timestamp + "")
    } else {
      wx.removeStorageSync(k + dtime)
    }
}
/*
   获取指定缓存封装
*/
function get(k, def) {
    var deadtime = parseInt(wx.getStorageSync(k + dtime))
    if (deadtime) {
      if (parseInt(deadtime) &lt; Date.parse(new Date()) / 1000) {
            if (def) {
                return def;
            } else {
                return;
            }
      }
    }
    var res = wx.getStorageSync(k);
    if (res) {
      return res;
    } else {
      return def;
    }
}
/*
    移除单个缓存缓存封装
*/
function remove(k) {
    wx.removeStorageSync(k);
    wx.removeStorageSync(k + dtime);
}
/*
    移除数组缓存缓存封装
*/
function removeList(arr) {
    arr.forEach(k =&gt; {
      wx.removeStorageSync(k);
      wx.removeStorageSync(k + dtime);
    })

}
/*
    清空所有缓存
*/
function clear() {
    wx.clearStorageSync();
}
</code></pre><br><br>
来源：https://www.cnblogs.com/ypSharing/p/15346455.html
頁: [1]
查看完整版本: 微信小程序开发指南