微信小程序总结篇

最新推荐文章于 2022-11-15 17:32:22 发布

Yin.云端

最新推荐文章于 2022-11-15 17:32:22 发布

阅读量297

点赞数

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/qq_35892039/article/details/85252207

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.准备

1、注册小程序账号，获得AppID，具体过程请参考：申请帐号

2、安装腾讯提供的微信开发者工具，具体参考：微信开发者工具

2.初始

3.wxml文件（官方文档）

1、简介：WXML是框架设计的一套标签语言，以此来构建出页面的结构，类似于HTML。

2、标签（常用）：

微信小程序标签	H5标签
<view> </view>	<div> </div>
<text> </text>	<span> </span>等
<icon> </icon>	<i class="icon icon-ok"></i> 字体图标
<input /> <checkbox /> <radio /> <view bindtap="chooseImage"> </view>	<input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="file" />
<picker range="{{selObj}}"> <view> {{selObj[index]}} </view> </picker>	<select> <option></option> ... </select>
<navigator url="#" resirect></navigator>	<a href="#"></a>
<image mode="aspectFill" src=""></image>	<img src="" />

3、举例：

<!--块级别的元素-->
<view>
  {{ msg }}    //msg数据需定义在js脚本中Page()-data中
  <button bindtap="showMsg">点击我</button>    //bindtap绑定事件需定义于s脚本中Page()中
</view>

<!--组件级别的元素-->
<template name="one">    //组件定义
  <view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template>
<template is="one" data="{{...oneData1}}"></template>    //使用组件，并传递相关值
<template is="one" data="{{...oneData2}}"></template>

<!--for循环级别的元素-->
<view>
  <view wx:for="{{[1,2,3,4]}}" wx:for-item="i">
    <view wx:for="{{[1,2,3,4]}}" wx:for-item="j">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

4、注意：

1.<view>组件控制页面内容展现;

2.数据绑定：

1.需在js脚本的Page()-data中定义；

2.使用 {{}} 来使用绑定的数据；

3.{{}}内可进行简单的运算，但是不建议；

4.属性中使用绑定的数据，也需要使用{{}}；

<!--wxml-->
<view> {{msg}} </view>

//page.js
Page({
    data:{
        msg:"数据绑定"
    }
})

3.列表渲染：

1.wx:for控制属性绑定一个数组，使用数组中数据遍历渲染组件；

2.默认情况下，下标-index；当前项-item；wx:for-index=" "定义新的下标，wx:for-item=" "定义新的当前项；

3.wx:for可进行简单的嵌套，建议不超过三层；

<view wx:for="{{arr}}" wx:for-index="i" wx:for-item="value">
　　{{i}}:{{value}}
</view>
<!--九九乘法表-->
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
    <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
        <view wx:if="{{i<=j}}">
            {{i}} * {{j}} = {{i*j}}
        </view>
    </view>
</view> 


//page.js
Page({
    data:{
        arr:[1,2,3,4]
    }
})

4.条件渲染：

1.wx:if=“{{ }}”来判断是否需要渲染该代码块，也可以用wx:elif和wx:else来添加一个else块；

2.wx:if是一个控制属性，如果想判断多个组件标签，可使用<block>将多组件包裹起来；

3.<block>不是一个组件，只起到包装效果，不会再页面渲染，且只接受控制属性（如wx:if）；

<block wx:if="{{true}}">
    <view> view1 </view>
    <view> view2 </view>
</block>

5.模板：

1.模板可定义复用性强的代码片段，可以理解成vue里的模板；

2.name=“ ”定义模板的名称，is=“ ”来使用模板，data=“ ”定义实例化的模板的数据；

3.模板的特殊之处在于有自己的作用域，只能在属性data中传递；

<template name="one">
    <view>
        name:{{firstName}} {{lastName}}
    </view>
</template>

<template is="one" data="{{...person1}}"></template>
<template is="one" data="{{...person2}}"></template>


//page.js
Page({
   date:{
       person1:{firstName:'y',lastName:'js'},
       person2:{firstName:'g',lastName:'c'},
   } 
})

6.事件绑定：

1.事件是视图层到逻辑层的通信方式，事件可以将用户的行为反馈到逻辑层进行处理；

2.使用bindtap绑定事件触发函数；

3.绑定的触发函数需定义在Page()中；

4.小程序的冒泡（会）和非冒泡（不会）向父元素传递；

<view bindtap="add">{{num}}</view>

//page.js
Page({
    data:{
        num:1
    },
    add:function(e){
        this.setData({    //设定绑定数值
            num:this.data.num + 1
        })
    }
})

7.引用：

1.方式一：import引用，引用的是目标文件的template模板，bug就是不会引入目标文件的import和tempalate；

2.方式二：include引用，可以理解成就是复制再粘贴；

//方式一：import引用
<!--item.wxml-->
<template name="item">
    <text>{{text}}</text>
</template>
<!-- index.wxml -->
<import src="item.wxml">
<template is="item" data="{{text:'forbar'}}"/>


//方式一：include引用
<!--header.wxml-->
<view> header </view>
<!--footer.wxml-->
<view> footer </view>
<!--index.wxml-->
<include src="header.wxml"/>
<view> body</view>
<include src="footer.wxml"/>

4.WXSS文件（官方文档）

1、简介：WXSS是一套样式语言，用于描述WXML的组件样式，相当于css文件。

2、支持：选择器方面，主要支持“.class”、“#id”、“elemnt”、“element,element”、“::after”、“::before”。

3、特性：

1.尺寸单位：

1.rpx：物理像素点，可根据屏幕度进行自适应。规定屏宽为750rpx，iphone6正好整除，可看做标准来开发；

2.rem：规定屏幕宽度为20rem；

2.全局&局部：app.wxss中为全局，所有page都能用；pages文件夹下的wxss为单页面提供。

3.内联样式：定义写法与html写法一样，需注意的是有{{}}的数据绑定。

4.导入样式：@import "common.wxss"; @import后跟导入样式表的相对路径，分号表示语句结束。

5.js文件（官方文档）

1、简介：js是逻辑处理的地方，逻辑层将数据进行处理后发送给视图层，同时接收视图层的事件反馈。

2、特性：

1.增加app和page方法，进行程序和页面的注册；

　　 2.提供丰富的API,如扫一扫、支付等微信特有的能力；

　　 3.每个页面有独立的作用域，并提供模块化能力；

3、讲解：

1.注册程序：

1.App()方法用来注册一个小程序；

2.App()接受一个object参数，用于指定小程序的生命周期函数等；

3.App()只能出现一次，存在于app.js中；

App({
  onLaunch: function(){
    //启动时执行的初始化工作，只能出现一次
  },
  onShow: function(){
    //小程序从后台进入前台时，触发执行的操作
  },
  onHide: function(){
    //小程序从前台进入后台时，触发执行的操作
  }
})

2.注册页面：

1.Page()方法用来注册一个页面；

2.Page()接受一个object参数，用于指定页面的初始数据、生命周期函数、事件处理函数等；

3.Page()方法每个页面有且仅有一个，存在于该页面的.js文件中；

Page({
  data: {
    Text: 'yjs'
  },
  /*  生命周期开始定义  */
  onLoad: function (options) {      //只能一次；
    //页面加载时执行的初始化工作
  },
  onReady: function () {            //只能一次；
    //页面就绪后触发执行的操作
  },
  onShow: function () {            //每次打开会调用；
    //页面打开时，触发执行的操作
  },
  onHide: function () {            
    //页面隐藏时，触发执行的操作
  },
  onUnload: function () {
    //页面关闭时，触发执行的操作
  },
  /*  生命周期结束定义  */
   
  onPullDownRefresh: function(){
    //用户在页面下拉时执行的操作
  },
  onReachBottom: function(){
    //到达页面底部时执行的操作
  },
  clickFn: function () {
    this.setData({
      text: 'gc'
    })
  },
})

3.模块化：可以将一些公共的代码抽离成为一个单独的js脚本文件，作为一个模块。

//common.js
function sayHello(name){
    console.log('Hello' + name + '!')
}
module.exports = {
    sayHello:sayHello
}

//call.js
var common = require('common.js')
Page({
    helloMINA:function(){
        common.sayHello('MINA')
    }
})

6.json配置文件（官方文档）

1、全局配置--app.json：

1.微信小程序的全局配置保存在app.json文件中；

2.开发者通过使用app.json来配置页面文件（pages）的路径、窗口（window）表现、设定网络超时时间值等；

{
  "pages": [                                        //页面路径：注册所有要显示的页面page
    "pages/index/index",
    "pages/logs/logs",
    "pages/demo/demo"
  ],
  "window": {                                       //默认页面窗口样式
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tarBar": {                                       //底部tab切换
    "list": [{
      "pagePath":"pages/index/index",
      "text": "首页"
    },{
      "pagePath": "pages/logs/logs",
      "text": "日志"
    },{
      "pagePath": "pages/demo/demo",
      "text": "demo"
    }]
  },
  "networkTimeout": {                              //网络超时相关设置
    "request": 20000,
    "connectSocket": 20000,
    "uploadFile": 20000,
    "downloadFile": 20000
  },
  "debug":true                                    //是否开启debug模式，默认false，正式版关闭最佳
}

2、页面配置--page.json：

1.每一个页面进行配置；

2.只能设置本页面的window配置项的内容；

3.页面.json文件中的window配置值将覆盖app.json（全局配置）中的配置值；

4.一般不会和全局配置中的window配置不会有太多出入，尽量不要配置；

Yin.云端

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
微信小程序总结篇

1.准备1、注册小程序账号，获得AppID，具体过程请参考：申请帐号2、安装腾讯提供的微信开发者工具，具体参考：微信开发者工具2.初始3.wxml文件（官方文档）1、简介：WXML是框架设计的一套标签语言，以此来构建出页面的结构，类似于HTML。2、标签（常用）：微信小程序标签 ...
复制链接

扫一扫