微信小程序

最新推荐文章于 2022-04-11 18:11:07 发布

wwintowin

最新推荐文章于 2022-04-11 18:11:07 发布

阅读量416

点赞数 2

文章标签：微信小程序

本文链接：https://blog.csdn.net/wwintowin/article/details/103267047

版权

微信小程序

1. 小程序注册

2. 小程序简单认识

创建时间： 2016年
小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
小程序并非凭空冒出来的一个概念。当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时，微信就有相关的 JS API 了。
- WebView 组件 - 微信是一个原生app,小程序类似一个webapp
  - 如果我想将一个webapp内嵌如微信中，如何做？
  - 通过WebView组件来接webapp

3. 创建第一个小程序应用

1. 认识小程序项目

目录
- pages 页面
  - index
    - index.js
    - index.json
    - index.wxss
    - index.wxml
  - log
- utils 封装模块、封装函数
- app.js 项目入口文件
- app.json 项目配置文件
- app.wxss 项目全局样式文件
- project.config.json 工具配置文件
  - 可以记录我们开发工具配置，以便将来换了电脑之后使用
- sitemap.json 说明文件
小程序中文件类型有4个
- wxml文件 - 类似 html文件
  - 里面写的都是微信小程序组件，比如： view、swiper
- wxss文件 - 类似css文件样式文件
- json文件 - 配置文件
- js文件 - 处理逻辑文件

2. 了解小程序的配置文件

app.json - 项目配置文件（全局配置）
- pages
  - 谁在第一个，那么页面启动就展示谁
- window界面表现:根据api修改
- 底部tab栏

project.config.json

{
	"description": "项目配置文件",
	"packOptions": {
		"ignore": []
	},
	"setting": {
		"urlCheck": true,
		"es6": false,
		"postcss": true,
		"minified": true,
		"newFeature": true,
		"autoAudits": false,
		"checkInvalidKey": true
	},
	"compileType": "miniprogram",
	"libVersion": "2.9.1",
	"appid": "wx498ac825301603df",
	"projectname": "mini_program_1907",
	"debugOptions": {
		"hidedInDevtools": []
	},
	"isGameTourist": false,
	"simulatorType": "wechat",
	"simulatorPluginLibVersion": {},
	"condition": {
		"search": {
			"current": -1,
			"list": []
		},
		"conversation": {
			"current": -1,
			"list": []
		},
		"game": {
			"currentL": -1,
			"list": []
		},
		"miniprogram": {
			"current": -1,
			"list": []
		}
	}
}

page.json pages文件夹中的json文件，针对一个页面的配置，优先级较高

comp.json
{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#FF8C00",
  "navigationBarTitleText": "组件学习"
}

app.json:
{
  "pages": [
    "pages/comp/comp",
    "pages/category/category",
    "pages/index/index",
    "pages/logs/logs",
    "pages/recommend/recommend",
    "pages/api/api",
    "pages/detail/detail"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#e54847",
    "navigationBarTitleText": "哈哈哈",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#ccc"
  },
  "tabBar": {
    "color": "#000000",
    "selectedColor": "#FF8C00",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "img/home.png",
        "selectedIconPath": "img/home-active.png"
      },
      {
        "pagePath": "pages/comp/comp",
        "text": "组件",
        "iconPath": "img/shopcar.png",
        "selectedIconPath": "img/shopcar-active.png"
      },
      {
        "pagePath": "pages/api/api",
        "text": "api",
        "iconPath": "img/mine.png",
        "selectedIconPath": "img/mine-active.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "img/category.png",
        "selectedIconPath": "img/category-active.png"
      },
      {
        "pagePath": "pages/recommend/recommend",
        "text": "推荐",
        "iconPath": "img/recommend.png",
        "selectedIconPath": "img/recommend-active.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

3.组件

以轮播组件为例wxml写结构，将data数据放入js中

<!-- 使用组件 -->
<view class = "box">
  <!-- 1. 视图容器 - 组件 - swiper -->
  <swiper
    autoplay 
    interval = "2000"
    circular
    indicator-dots 
    indicator-color='white'
    indicator-active-color='yellow'
  >
    <swiper-item class = "swiper1">1</swiper-item>
    <swiper-item class = "swiper2">2</swiper-item>
    <swiper-item class = "swiper3">3</swiper-item>
  </swiper>
</view>

<view class='box'> 基础组件 - icon </view>
<icon type = "success" size = "40" color = "red"></icon>

<view class='box'> 表单 - picker </view>
  <picker bindchange='changeCountry' range='{{ array }}'>
    <view>
      {{ country }}
    </view>
  </picker>


<view class='box'> 导航 </view>
<!-- 
  小程序中导航跳转方式
    1. 跳转一个非tabbar配置的页面
    2. 跳转一个tabbar配置的页面    naviagtor   要加一个  open-type = "switchTab"
  html中跳转页面的方式
 -->
  <navigator url = "/pages/detail/detail"> 跳转新页面 </navigator>
  <navigator url = "/pages/detail/detail" open-type='redirect'> 在当前页面打开 </navigator>
  <navigator url = "/pages/category/category" open-type="switchTab">  跳转分类  </navigator>

<!-- 使用js来跳转页面 -->
  <button type = "primary" bindtap = "goRecommend"> 跳转推荐 </button>


  <view class='box'> 媒体 - video </view>

  <video id='myVideo' src = "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
  
  <button type = "primary" bindtap = "putDanmu"> 发送弹幕 </button>

4.小程序中的数据展示

// pages/category/category.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg: 'Hello 小程序',
    f: true,
    type: 'C',
    todos: [
      {
        id: 1,
        task: '任务一'
      },
      {
        id: 2,
        task: '任务二'
      }
    ]
  },

  eventHandler1 () {
    console.log('事件一')
  },
  eventObj ( e ) {
    console.log('e',e)
  },
  eventArg ( e  ) {
   /* 传参，那么我们直接用data中的数据  */
  },
  changeMsg () {
    /* 小程序中数据修改使用  this.setData() */
    this.setData({
      msg: 'hello 你好'
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

<view class = "event-box"></view>
  <view> 小程序中数据如何更改 </view>
  <button type = "primary" bindtap = "changeMsg"> 修改msg </button>
  <text> {{ msg }} </text>
<view class = "event-box"></view>

<text> {{ msg }}  </text>

<text> 数据展示 </text>--相当于span标签
<view>
  <text> {{ msg }}  </text>--相当于div
</view>

<text> 条件展示 </text>

<view wx:if = "{{ f }}"> 条件1 </view>

<text> 条件 - 双路 </text>

<view wx:if = "{{ f }}"> A </view>
<view wx:else> B </view>

<text> 条件 - 多路 </text>

<view wx:if = "{{ type == 'A'}}"> A </view>
<view wx:elif = "{{ type =='B' }}"> B </view>
<view wx:else > C </view>

<text> 数据渲染 </text>

<view wx:for = "{{ todos }}"> 
  <text> {{ item.task }} </text>
  <text> {{ index  }} </text>
</view>
<view wx:for = "{{ todos }}" wx:for-item = "ele"> 
  <text> {{ ele.task }} </text>
</view>

<text> block </text>

<block wx:for = "{{ todos }}">
  <view> {{ item.task }}  </view>
  <view> {{ item.task }}  </view>
</block>

<view class = "event-box"></view>
<!-- 事件绑定： bind / catch  -->
<!-- 事件类型： tap  longtap  lognpress  -->
<input value = "{{ msg }}"/>
<button type = "primary" bindtap = "eventHandler1"> 事件一 </button>
<button type = "primary" catchlongtap = "eventHandler1"> 事件一 </button>
<button type = "warn" bindtap = "eventObj"> 事件对象 </button>
<button type = "primary" bindtap = "eventArg( 10 )"> 事件传参 </button>

bind相当于on

5.模板（公用的东西）

tpl文件夹
<template name = "item">
  <view>
    公用模板
  </view>
</template>

6.事件

和react的用法一样写在js中

eventHandler1 () {
    console.log('事件一')
  }

7.小程序中数据如何更改

8.api

wwintowin

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
微信小程序

微信小程序1. 小程序注册2. 小程序简单认识创建时间： 2016年小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。小程序并非凭空冒出来的一个概念。当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时，微信就有相关的 JS API 了。WebView 组件 - 微信是一个原生app,小程序类似一个webap...
复制链接

扫一扫