微信小程序实战(3)

何记云
739 阅读4分钟

1.接下来记一笔这个页面类似于修改账单页面, 这里可以直接复制过来, 再改改, 图标选项使用遍历就可以了.

  1. 搜素页也很简单, 使用的是weui中的search, 也可以自己写搜素框, 都行. 然后点击跳转到修改账单页就行.

  2. 然后就剩下最后一个我的模块了. 首先先完善当前页面, 这个页面组成为一个头像+文字, 一个列表, 很简单.这里需要添加四个子页面, 关于页,个人信息页, 分类设置页,和新增分类页.

  3. 类别分类, 这里采用weui的slideview,进行左滑删除, 其他的就没啥了, 都是重复的东西, 这里就不细讲了, 然后这几个页面里有个更换头像的功能, 这里讲一下怎么操作.
    在头像点击事件中, 调用wx.chooseImage()选择图片, 然后再调用图片上传的方法, 就可以了.

因为整体比较简单, 所以很多重复点我都跳着过了, 基本上整个简单的项目涉及的点就是这些, 做完基本上可以对微信开发的基础有了一个比较全面的了解了, 当然, 还有无关开发的小程序上传, 审批等等, 这些我就不讲了, 毕竟直接搜就搜得到, 操作没什么变化. 下面讲一些基础的其他点

app.json: 小程序的全局配置文件

// json文件中不能添加注释, 为了方便讲述, 这里就直接添加注释说了
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/demo/demo",
    "pages/no/no"
  ],   pages 作用是定义页面访问路由, 在此处数组中添加路由时, 项目中pages文件夹下会自动生成对应 
  文件夹,所以需要添加页面时, 直接在此处添加路径即可, 删除同理, 需要同步将pages中的文件夹删除
  "tabBar": {
  // tabBar定义小程序下方的固定导航菜单, 需要注意的是, 在此处定义的路由path后在其他页面不能重复定义.
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "white",
    "list": [
    // list的数据为循环遍历后的固定菜单的数量及其他信息
      {
        "selectedIconPath": "images/1.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "images/1.png",
        "pagePath": "pages/logs/logs",
        "text": "日志"
      },
      {
        "selectedIconPath": "images/1.png",
        "pagePath": "pages/demo/demo",
        "text": "测试"
      }
    ]
  },
  "permission": {
  // 控制小程序权限相关的属性, 如地图等.
    "scope.userLocation": {
      "desc": "授权允许获取你的位置信息"
    }
  },
  "window":{
  // 定义项目全局的样式, 此处定义的样式会被子组件定义覆盖.
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

微信小程序与网页开发的区别

运行环境逻辑层渲染层
iosJavaScriptwkwebview
androidv8chromium定制内核
开发工具NWJSChrome webview

自定义分享 , 在需要分享的页面 .js文件中添加此方法

 onShareAppMessage: function () {
    return {
      title: "自定义标题",
      desc: "自定义分享描述",
      path: "/pages/logs?id=123"
    }
  }

绑定事件如何传递参数&父子组件通信

  1. 小程序函数无法接收参数, 可以使用 data-参数设置参数, 然后在event中的currentTarget获取
    小程序子组件向父组件传参:
    +1.在子组件中, 使用 this,triggerEvent('方法名', params) , 类似于vue的$emit方法
    +2.在父组件.json文件中usingComponents属性中引用自组件 
    "usingComponents": {
	"add-item": "../../../adddemo"
   引用组件的使用标签    子组件的相对路径
}

+3. 父组件中添加子组件

<add-item  bind:方法名="getInfo">

+4. 可以在getInfo中获取参数, event.detail是回调参数的详细信息

父组件调用子组件方法

  1. 给子组件定义唯一标识id,

  2. let child = this.selectComponent("#idname"), child.function()
    父组件向子组件传值

  3. 直接在子组件引用标签上写属性, 然后在子组件js中使用properties定义接收, 类似vue

  4. 子组件使用observers监听传值变化, 类似vue的watch

H5与小程序之间的相互跳转

小程序 -> H5
直接内嵌标签, 这里在开发的时候需要配置 设置->项目设置->不校验.....

 <web-view src="https://域名"></web-view>

H5 -> 小程序
1.内嵌标签

 <web-view src="https://域名"></web-view>

2.在H5页面添加js, 调用wx.miniProgram.navigateTo

<script>
  wx.miniProgram.navigateTo({url: 'index/index?idname:...'})
</script>

3 . 小程序的onLoad中的options获取路径参数

支付

  1. 在wx.login中获取当前用户登录凭证(code)
  2. 用code在后端服务器中换取用户唯一标识(openid), 会话密钥(session_key) (appid,secret,code,grant-type作为参数), 后端处理中....
  3. 开启预支付, openid,appid,商户号, 支付金额,设备id等参数传给后端, 返回prepay_id
  4. 调用wx.requestPayment, 五个参数: 当前支付时间, 随机字符串, package(包含prepay_id), 支付签名

地图

  1. app.json中添加 permission, 地图权限 , 如果真机调试蓝屏, 开发工具正常, 则未开启定位
"permission": {
    "scope.userLocation": {
      "desc": "授权允许获取你的位置信息"
    }
  },
  1. 使用map标签创建地图组件, 设置一系列参数.
<map></map>
  1. 在.js文件中, 设置初始化参数信息,
onLoad: function () {
    var that = this
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude
        })
      }
    })
 }
avatar
文章
阅读
粉丝