微信小程序

目录

环境准备
注册账号
获取APPID
开发工具
小程序结构目录
小程序文件结构和传统web对比
基本的项目目录
 小程序配置文件
. 全局配置app.json
1. pages
2. window
3.tabbar
 页面配置page.json
模板语法
数据绑定
普通写法
组件属性
bool类型
 运算
列表渲染
条件渲染
wx:if
. hidden
小程序事件的绑定
样式 WXSS
尺寸单位
样式导入
选择器
 小程序中使用less
常用组件
 text
 . image
 swiper 
 . navigator
 . rich-text
button
. icon
radio . checkbox
自定义组件
. 其他属性
组件-自定义组件传参
小程序生命周期

---

环境准备

注册账号

建议使用全新的邮箱，没有注册过其他小程序或者公众号的 访问注册⻚⾯，耐⼼完成注册即可
获取APPID


  于后期调⽤微信⼩程序的接⼝等功能，需要索取开发者的⼩程序中的  APPID ，所以在注册成功后， 可登录，然后获取APPID。  登录 ，成功后可看到如下界⾯ 然后复制你的APPID,悄悄的保存起来，不要给别⼈看到?  

开发工具

下载地址

  微信⼩程序⾃带开发者⼯具，集  开发 预览 调试 发布  于⼀⾝的 完整环境。 但是由于编码的体验不好，因此 建议使⽤ vs code + 微信小程序编辑工具 来实现编码 vs code 负责敲代码， 微信编辑工具 负责预览   小程序结构目录


  ⼩程序框架 的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验服务。  ⼩程序框架提供了⾃⼰的视图层描述语⾔  WXML 和 WXSS 、，以及 JavaScript ，并在视图层与逻   辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。  小程序文件结构和传统web对比


 通过以上对⽐得出，传统web 是三层结构。⽽微信⼩程序 是四层结构，多了⼀层 配置.json
基本的项目目录



 小程序配置文件


   一个小程序应会程序会包括最基本的两种配置文件。一种是全局的  app.json 和 的 page.json 注意：配置文件中不能出现注释  . 全局配置app.json


  app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底   部 tab 等。 普通快速启动项目里 边的  app.json 配置    
  字段的含义  1. pages

  字段用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序 页面定义在哪个目录。  2. window

  字段定义小程序所有页面的顶部背景颜色，文字颜色定义等。   3. 完整的配置信息请参考  app.json配置   3.tabbar


 页面配置page.json


  这里的  page.json 其实是来表示页面录下的 page.json 这类和小程序页面相关的配置。   开发者可以独立定义每个页面的一些属性，如顶部颜色、是否允许下拉刷新等等。   页面的配置只能设置  app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。   

模板语法

text==span
view==div
checkbox==复选框
  block  渲染一个包含多节点的结构块 block最终不会变成真正的dom元素  
  WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合 基础组件 、 事件系统 ，可以构 建页面的结构。  数据绑定

普通写法

1. <view> {{ message }} </vie
2. Page({
3.  data: {
4.    message: 'Hello MINA!'
5. }
6. })

复制代码

列表渲染

wx:for
  项的变量名默认为  item wx:for - -item 可以指定数组当前元素的变量名   下标变量名默认为  index wx:for - -index 可以指定数组当前下标的变量名   wx:key 、用来提高数组渲染的性能      保留字   *this ，它的意思是 item 本身 ，*this 代表的必须是 唯一的字符串和数组。    wx:key 绑定的值 有如下选择   1.  string 类型，表示 循环项中的唯一属性   

1. <view id="item-{{id}}"> </view>
2. Page({
3.  data: {
4.    id: 0
5. }
6. })

复制代码

   条件渲染

  wx:if 移除标签
    频繁切换 hidden 不常使用   wx:if 添加样式   wx:if

  
    在框架中，使用  wx:if="{{condition}}" 来判断是否需要渲染该代码块：     

1. <checkbox checked="{{false}}"> </checkbox>

复制代码

  . hidden

  

1. 三元运算
2. <view hidden="{{flag ? true : false}}"> Hidden </view>
3. 算数运算
4. <view> {{a + b}} + {{c}} + d </view>
5. 逻辑判断
6. <view wx:if="{{length > 5}}"> </view>
7. 字符串运算
8. view>{{"hello" + name}}</view>
10. Page({
11.  data:{
12.    name: 'MINA'
13.     a: 1,
14.    b: 2,
15.    c: 3
16. }
17. })

复制代码

  小程序事件的绑定

   
      小程序中绑定事件，通过bind关键字来实现。如    bindtap bindinput bindchange 等 不同的组件支持不同的事件，具体看组件的说明即可。         

1. list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]
2. wx:key="id"
4. list:[1,2,3,4,5]
5. wx:key="*this"
7. <view wx:for="{{array}}" wx:key="id">
8. {{index}}: {{item.message}}
9. </view>
11. Page({
12.  data: {
13.    array: [{
14.      id:0,
15.      message: 'foo',
16.   }, {
17.      id:1,
18.      message: 'bar'
19.   }]
20. }
21. })

复制代码

       绑定事件时不能带参数 不能带括号、           事件传值 通过标签自定义属性的方式 和     value            

1.  <view wx:if="{{false}}">1</view>
2.  <view wx:elif="{{true}}">2</view>
3.  <view wx:else>3</view>

复制代码

    样式 WXSS

     
          WXSS(      WeiXin Style Sheets )是一套样式语言，用于描述 WXML 的组件样式。                      与       CSS       相于，      WXSS       扩展的特性有： 响应式长度单位 rpx 样式导入                         尺寸单位

                       rpx （responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx 。如在 iPhone6                        上，屏幕宽度为         375px ，共有750个物理像素，则 750rpx = 375px = 750物理1rpx = 0.5px = 1物理像素                                               设计稿750                       750px=750rpx                 1px=1rpx                       375设计稿                       375px=750rpx                      1px=2rpx             1rpx=0.5rpx                       未知          100px=750rpx*元素大小/page(设计稿大小) calc属性可以计算                建议： 开发微信⼩程序时设计师可以⽤ iPhone6 作为视觉稿的标准。
        使用步骤：
        
                1. 确定设计稿宽度 pageWidth                        2. 计算比例         750rpx = pageWidth px ,因此 1px=750rpx/pageWidth                        3. 在less⽂件中，只要把设计稿中的 px => 750/pageWidth rpx 即可。                         样式导入

         
                  wxss中直接就支持，样式导入功能。 也可以和 less中的导入混用。                          使用 @import 语句可以导入外联样式表，只支持         相对路径         。                  选择器

         
                  特别需要注意的是 小程序 不支持通配符          * 因此以下代码无效！                                             小程序中使用less

         
                  原生小程序不支持          less ，其他基于小程序的框架大体都支持，如 wepy ， mpvue ， taro 等。                           但是仅仅因为一个less功能，就去引人一个框架，肯定是不可取的。因此可以用以下形式来实现                           1. 编辑器是          vscode                           2. 安装插件          easy less                           3. 在vs code的设置中加⼊如下，配置                           

1. <view hidden="{{condition}}"> True </view>

复制代码

                   4. 在要编写样式的地方，新建           less 文件，如 index.less ,然后正常编辑即可                             常用组件

          view 代替 原来的 div 标签
           text

         
                    1. 文本标签                              2. 只能嵌套text                              3. 长按文字可以复制（只有该标签有这个功能）                              4. 可以对空格 回车 进形编码                                                  . image

         
                    1. 图片标签，image组件默认宽度320px、高度240px                              2. 支持懒加载                                                  
                    mode 有效值：                              mode 有 13 种模式，其中 4 种是缩放模式，9种是裁剪模式。                                                  swiper 

          微信内置轮播图组件 swiper-item 滑块 默认宽度和⾼度都是100%
         
           . navigator

           导航组件 类似超链接标签
         
           
           . rich-text

           富文本标签 
                    可以将字符串解析成 对应标签，类似 vue中           v-html 功能                             

1. <input bindinput="handleInput" />
3. Page({
4.  // 绑定的事件
5.  handleInput: function(e) {
6.    console.log(e);
7.    console.log("值被改变了");
8.     this.setData({
9.      num:e.detail.value
10.     })
11. }
12. })

复制代码

                                nodes属性            nodes            属性⽀持            字符串            和            标签节点数组                                                      
           

• nodes 不推荐使⽤ String 类型，性能会有所下降。
  
• rich-text 组件内屏蔽所有节点的事件。
  
• attrs 属性不值持 id ，支持 class 。 name 属性大小写不敏感。
  
• 如果使用了不受信任的 HTML 节点，该节点及其所有⼦节点将会被移除。
  
• img 标签仅持缩络图⽚。
  

         
                      button

           
            
            open-type 
           . icon

           
            
         

1. <input bindinput="handleInput" data-item="100" />
2. . 事件触发时获取数据
4. handleInput: function(e) {
5.    // {item:100}
6.   console.log(e.currentTarget.dataset)
7.      
8.    // 输入框的值
9.   console.log(e.detail.value);
10. }

复制代码

          radio . checkbox

           
                      自定义组件

           小程序允许我们使自定义组件的方式来构建页面
           创建自定义组件
           声明组件 首先需要在组件的 json 组件中进行自定义组件声明 myHeader.json   "component": true }
           编辑组件  同时，还要在组件的 wxml 组件中编写组件模板，在 wxss 组件中加组组件样式 slot 表示插槽，类似vue中的slot
         

1.  "less.compile": {
2.        "outExt":       ".wxss"
3.   }

复制代码

                     注册组件                         在组件的             js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和                                    自定义方法                                   

1. // 1   index.wxml 加载 节点数组 <rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
2. // 2 加载 字符串 <rich-text nodes='<img
3. src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p
4. ng" alt="">'></rich-text>
5.    
6. // index.js
7.    
8. Page({
9.  data: {
10.    nodes: [{
11.      name: 'div',
12.      attrs: {
13.        class: 'div_class',
14.        style: 'line-height: 60px; color: red;'
15.     },
16.      children: [{
17.        type: 'text',
18.        text: 'Hello World!'
19.     }]
20.   }]
21. },
22.  tap() {
23.    console.log('tap')
24. }
25. })

复制代码

                                      声明引入自定义组件                                                      首先要在页面的               json 文件中进行引入声明。还要提供对应的组件名和组件路径                                         

1. Page({
2.  data: {
3.    iconSize: [20, 30, 40, 50, 60, 70],
4.    iconType: [
5.      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
6. 'download', 'search', 'clear'
7.   ],
8.    iconColor: [
9.      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
10.   ],
11. }
12. })
13. <view class="group">
14.  <block wx:for="{{iconSize}}">
15.    <icon type="success" size="{{item}}"/>
16.  </block>
17. </view> <view class="group">
18.  <block wx:for="{{iconType}}">
19.    <icon type="{{item}}" size="40"/>
20.  </block>
21. </view> <view class="group">
22.  <block wx:for="{{iconColor}}">
23.    <icon type="success" size="40" color="{{item}}"/>
24.  </block>
25. </view>

复制代码

                             字面中使用定义组件                                             

1. <view class="inner">
2. {{innerText}}
3.    <slot></slot>
4. </view>

复制代码

               . 其他属性

                定义段与⽰例⽅法
               
                                Component 构造器可⽤于定义组件，调⽤ Component 构造器时可以指定组件的属性、数据、⽅法                                                                                
                                 组件-自定义组件传参

                 
                                  1. 父组件通过                 属性                 的行式给子组件传递参数                                                   2. 子组件通过                 事件                 的 行式向父组件传递参                                                  过程                                                                      1. 父                  组件                   把数据                   {{tabs}} 传递到 子组件的 tabItems 属性中                                                      2. 父                  组件                   监听                   onMyTab 事件                                                      3. 子                  组件                   触发                   bindmytap 中的 mytap 事件                                                                          1. 自定义组件触发事件时，需要使用                    triggerEvent 方法，指定 事件名 、 detail 对象                                                                             4. 父 -> 子动态传值                     this.selectComponent("#tabs")                                                           ;                                          1. 标签名 是 中划线的⽅式                                                               2. 属性的行式 也是要中划线的⽅式                                                               3. 其他情况可以使用驼峰命名                                                               1. 组件的文件名如                      myHeader.js 的等                                                               2. 组件内的要接收的属性名 如                      innerText                                                                                     小程序生命周期

                     
                       
                       
                       

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！