微信小程序开发（二）

最新推荐文章于 2020-08-28 16:04:40 发布

Amanda_wmy

最新推荐文章于 2020-08-28 16:04:40 发布

阅读量524

点赞数

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

本文链接：https://blog.csdn.net/Amanda_wmy/article/details/88745376

版权

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

2 篇文章 0 订阅

订阅专栏

微信小程序开发（二）

创建小程序页面：

在pages 中添加一个目录test ，或在将test 页面加入 app.json，就可自动生成test目录（包括test.wxml,test.json,test.js,test.wcss）
在首页加入跳转访问链接
在首页写一个页面入口，跳转到我们要测试的页面上，直接在首页 pages/index/index.wxml 添加一段代码一句链接.

保存代码，点击上面的编译按钮，所有代码运行起来，点击首页的“跳转到test页面”，跳转成功
设置页面标题
在 test.json里添加：

{
  "navigationBarTitleText": "详情页"
}

在这里插入图片描述
2. 底部导航栏（三个导航图标示例，微信小程序最多能加5个）

阿里图标库 http://www.iconfont.cn/collections/show/29

将图标放在一个文件夹下
添加配置文件
找到项目根目录中的配置文件 app.json 加入如下配置信息（app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

   "tabBar": {
  "color": "#a9b7b7",
  "selectedColor": "#11cd6e",
  "borderStyle": "white",
  "list": [
    {
      "selectedIconPath": "images/1.png",
      "iconPath": "images/2.png",
      "pagePath": "pages/index/index",
      "text": "首页"
    },
    {
      "selectedIconPath": "images/1.png",
      "iconPath": "images/2.png",
      "pagePath": "pages/logs/logs",
      "text": "日志"
    },
    {
      "selectedIconPath": "images/1.png",
      "iconPath": "images/2.png",
      "pagePath": "pages/test/test",
      "text": "测试"
    }
  ]
}

在这里插入图片描述
3. 自定义分享的功能
可以分享小程序的任何一个页面给好友或群聊。注意是分享给好友或群聊，并没有分享到朋友圈

注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮

示例代码：
Page({
 
  onShareAppMessage: function () {
 
    return {
 
      title: '自定义分享标题',
 
      desc: '自定义分享描述',
 
      path: '/page/index?id=123',
      imageUrl:'',//自定义图片地址
 
    }
 
  }
 
})

在这里插入图片描述

原理：
在 Page 中定义 onShareAppMessage 函数，设置该页面的转发信息。

			1：只有定义了此事件处理函数，右上角菜单才会显示 “转发” 按钮:
			2：用户点击转发按钮的时候会调用:
			3：此事件需要 return 一个 Object，用于自定义转发内容

轮播图
Swiper是滑动特效插件，面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。是目前应用较广泛的移动端网页触摸内容滑动插件。

wxml:
<swiper indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for="{{imgUrls}}" wx:key="unique">
  <swiper-item>
   <image src="{{item}}" class="slide-image"/>
  </swiper-item>
 </block>
</swiper>

js:
Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true,是否显示面板指示点
    autoplay: true,是否自动切换
    interval: 3000,自动切换时间间隔
    duration: 500,滑动动画时长
 
  },
})

四种页面跳转的方法（wx.navigateTo(Object object)）组件：navigator
用法：用于页面跳转，相当于html里面的<a></a>标签。
api教程：https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html

navigator 页面链接：

<!-- sample.wxml -->
<view class="btn-area">
  <navigator
    url="/page/navigate/navigate?title=navigate"
    hover-class="navigator-hover"
  >
    跳转到新页面
  </navigator>
  <navigator
    url="../../redirect/redirect/redirect?title=redirect"
    open-type="redirect"   //没有返回
    hover-class="other-navigator-hover"
  >
    在当前页打开
  </navigator>
  <navigator
    url="/page/index/index"
    open-type="switchTab"  //switchTab是切换Tab的
    hover-class="other-navigator-hover"
  >
    切换 Tab
  </navigator>
  <navigator
    target="miniProgram"
    open-type="navigate"
    app-id=""
    path=""
    extra-data=""
    version="release"
  >
    打开绑定的小程序
  </navigator>
</view>

// redirect.js navigator.js
Page({
  onLoad(options) {
    this.setData({
      title: options.title
    })
  }
})

api:

wx.navigateTo(Object object):保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.redirectTo(Object object): 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.switchTab(Object object):跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch(Object object):关闭所有页面，打开到应用内的某个页面
wx.navigateBack(Object object):关闭当前页面，返回上一页面或多级页面

引入外部js 文件

准备好外部想要引入的外部文件，命名为util.js,并且填充固定的文件内容（一般是固定的库）

在这里插入图片描述
打开util.js ，继续填写重要内容将要使用的方法用module.exports给暴露出来，如图所示（我暴露了一个方法： imageUtil，若有很多方法，则用json形式）

在想要用到这个方法的js里面 require这个js，然后调用即可
（我在index.js文件里面想要调用外部文件util.js，则先要获取应用实例：var imageUtil = require(’…/…/utils/util.js’);调用即可。）

也可引入现成的js库，比如moment.js,lodash.js等，直接在页面中引入即可使用。

引入框架WeUI
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。在微信小程序的开发过程中，涉及到的前端复杂的样式界面的问题，就需要使用个UI框架，这样可以省去以后很多麻烦。WeUI作为一个开源的移动端UI框架，由于它是微信官方提供的对微信的兼容性没有太大问题，而且和各组件的样式和微信一样，能够很好地和微信融合在一起，给用户较好的体验
使用步骤：

在GitHub上 https://github.com/weui/weui-wxss/ 下载程序代码，解压后可以看到如下目录：
只用将weui-wxss-master\dist\style\weui.wxss文件导入到小程序项目的根目录下：
在项目中引用：在全局app.wxss中加入weui.wxss的引用- @import “weui.wxss”
根组件使用class=”page”
<view class="page"></view>
页面骨架

<view class="page">
<view class="page__hd"></view><!--页头-->
<view class="page__bd"></view><!--主体-->
<view></view><!--未设置页脚-->
</view>

<view class="weui-footer">我是页脚</view>

具体组件在小程序中新建个项目，地址指向weui-wxss-master\dist，就可以随时查找自己要的效果，剩下的就是复制粘贴.
预览：

小程序中点击按钮跳转另外一个小程序
推广业务需要，会在一个小程序之中绑定另外一个小程序，形成小程序内部之间的生态系统，不但可以满足用户更多需求，增强小程序用户粘性，还可以有利于小程序大量引流
从小程序A内跳转到小程序B内有一个前提条件：A和B必须被同一个公众号关联，打开同一公众号下关联的另一个小程序。（注：必须是同一公众号下，而非同个 open 账号下）
开发者提交新版小程序代码时，如使用了跳转其他小程序功能，则需要在代码配置中声明将要跳转的小程序名单，限定不超过 10 个，否则将无法通过审核。该名单可在发布新版时更新，不支持动态修改

在开发者工具上调用此 API 并不会真实的跳转到另外的小程序，但是开发者工具会校验本次调用跳转是否成功。详情
开发者工具上支持被跳转的小程序处理接收参数的调试

wx.navigateToMiniProgram({
  appId: '要打开的AppId',
  path: 'pages/index/index?id=123456789',
  extarData: {
    open: 'happy'
  },
  envVersion: 'release',
  success(res) {
    // 打开成功
  }
})

小程序本地相册选择图片或相机拍照底部弹框功能
wx.chooseImage(Object object)从本地相册选择图片或使用相机拍照。
https://developers.weixin.qq.com/miniprogram/dev/api/wx.chooseImage.html?search-key=wx.chooseImage

count表示最多可以选择的图片张数， sizeType表示所选的图片的尺寸sourceType表示选择图片的来源
wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success(res) {
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths
  }
})

<view class="container">
  <view>
    <button class="btn" bindtap="chooseimage">点击更换图片</button>
  </view>
 
  <view>
    <image src="{{img}}" catchTap="chooseImageTap" mode="aspectFit" class="img" />
  </view>
</view>

js:
Page({
  data: {
    img: '../../images/1.jpg'
  },
  onLoad: function() {},
 
  chooseWxImage: function(type) {
    var that = this;
    wx.chooseImage({
      sizeType: ['original', 'compressed'],
      sourceType: [type],
      success: function(res) {
        console.log(res);
        that.setData({
     // tempFilePath可以作为img标签的src属性显示图片
          img: res.tempFilePaths[0],
        })
      }
    })
  },
 
  chooseimage: function() {
    var that = this;
    wx.showActionSheet({
      itemList: ['从相册中选择', '拍照'],
      itemColor: "#a3a2a2",
      success: function(res) {
        if (!res.cancel) {
          if (res.tapIndex == 0) {
            that.chooseWxImage('album')
          } else if (res.tapIndex == 1) {
            that.chooseWxImage('camera')
          }
        }
      }
    })
 
  },
})