侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

微信小程序版的知乎日报开发实例

微信(小程序)  /  管理员 发布于 2年前   154

先看看效果图

开发环境准备

小程序 出来第二天就被破解,第三天微信就把开发工具开发下载了, 现在只需要下载 微信开发者工具 就可以使用了,

创建项目的时候,要选择无 appid, 这样就不会有 appid 的验证了。

目录结构

     1、app.js 注册app逻辑, app.wxss 全局样式文件 app.json 配置信息

     2、pages 存放页面文件

     3、utils 工具类代码

     4、images 图片资源文件

小程序中每一个页面都会有三个文件 .wxml .wxss .js ,对应着结构、样式、和逻辑,相当于网页中的 html css 和 js 的关系。

开发第一个页面

代码来自新建项目

<!--index.wxml--><view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="//article/{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view></view>

/**index.wxss**/.userinfo { display: flex; flex-direction: column; align-items: center;}.userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%;}.userinfo-nickname { color: #aaa;}.usermotto { margin-top: 200px;}

//index.js//获取应用实例var app = getApp()Page({ data: { motto: 'Hello World', userInfo: {} }, //事件处理函数 bindViewTap: function() { wx.navigateTo({  url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){  //更新数据  that.setData({  userInfo:userInfo  }) }) }})

新建的项目中,index 下都会看到这些代码,接下来分别介绍 wxml wxss js

wxml

这个是页面结构的描述文件, 主要用于以下内容

     1、用标签形式指定组件使用 <view></view>

     2、使用 wx:for wx:if 等指令完成一些模板上的逻辑处理

     3、使用 bind* 绑定事件

wxss

样式文件,和 css 语法基本一致,不过支持的选择器语法有限 看这里 , 可以使用 flexbox 完成布局。

内部也可以使用 import 命令引入外部样式文件

@import "common.wxss";.pd { padding-left: 5px;}

js

页面逻辑控制, 遵循 commonJs 规范

// util.jsfunction formatTime(date) { // ....}function formatDate(date, split) { // ...}module.exports = { formatTime: formatTime, formatDate: formatDate}var utils = require('../../utils/util.js')

这里的js 并不是在 浏览器环境下运行, 所以 window.* 这一类的代码都会报错, dom 操作也是不被允许的,官方目前好像是不能支持其他的 js 库运行,全封闭式,这个以后应该会逐渐完善。

页面上使用 Page 方法来注册一个页面

Page({ data:{ // text:"这是一个页面" }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 }})

当我们需要改变 绑定的数据时,必须调用 setData 方法修改,才会触发页面更新,像这样:

Page({ data: {  text: '这是一个页面' }, onLoad: function() {  this.setData({   text: 'this is page'  }) }})

条件渲染和列表渲染

以下内容来自微信官方文档。

小程序使用 wx:if="" 完成条件渲染,类似于 vue 的 v-if

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块:

<view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{length > 2}}"> 2 </view><view wx:else> 3 </view>

wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

内置变量 index (数组遍历的下标), item (数组遍历的每一项)

<view wx:for="{{items}}"> {{index}}: {{item.message}}</view>Page({ items: [{ message: 'foo', },{ message: 'bar' }]})

使用wx:for-item可以指定数组当前元素的变量名

使用wx:for-index可以指定数组当前下标的变量名:

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}}</view>

事件绑定

wxml 只是用 bind[eventName]="handler" 语法绑定事件

<view bindtap="bindViewTap" class="userinfo"><text>tap</text></view>Page({ bindViewTap: function(e) {  console.log(e.taget) }})

通过 data-* 和 e.target.dateset 传递参数

<view bindtap="bindViewTap" data-test-msg="啦啦啦啦啦啦" class="userinfo"><text>tap</text></view>Page({ bindViewTap: function(e) {  // 会自动转成驼峰式命名  console.log(e.taget.dataset.testMsg) // 啦啦啦啦啦啦 }})

目前踩过的坑

事件绑定中 e.target.dataset

当在父组件绑定事件和参数,点击时又子组件冒泡事件到父组件,这个时候 e.target.dataset 为空

<view bindtap="bindViewTap" data-test-msg="啦啦啦啦啦啦" class="userinfo"> <view><text>tap</text></view></view>Page({ bindViewTap: function(e) {  console.log(e.taget.dataset.testMsg) // undefined }})

在线图片加载不稳定

在知乎日报这个项目上有大量图片需要从网上下载,这里 image 组件额显示显得极其不稳定,有很多的图片都显示不出来.

总结

微信小程序现在还在内测阶段,有很多的问题需要完善,不过对于开发速度和体验来说还是不错的,期待正式发布的那一天。以上就是本文的全部内容了,希望对大家学习使用微信小程序能有所帮助。


  • 上一条:
    微信小程序设置http请求的步骤详解
    下一条:
    微信小程序学习之初探小程序
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 百度小程序详情页中使用wxapp-rich-text组件解析html标签并展示出来(0个评论)
    • 百度小程序列表中点击跳转详情页流程步骤(0个评论)
    • 百度小程序封装get post请求等全局函数及实现请求后端api数据循环展示功能(0个评论)
    • 近期文章
    • 在Laravel应用程序如何减少代码重复编写(0个评论)
    • 在laravel项目中提高安全性方式推荐:CSP内容安全策略(0个评论)
    • 在go语言中从值中获取常量名称代码示例(0个评论)
    • 在go语言中如何通过名称获得结构字段和值代码示例(0个评论)
    • 在go语言中用JQuery + html2canvas实现拍摄浏览器的屏幕截图示例(0个评论)
    • 人生感悟分享:讲一个大学毕业生到社畜老狗的蜕变心路历程(0个评论)
    • laravel9框架报错Target class... does not exist解决方式(0个评论)
    • Laravel 9.48版本发布(0个评论)
    • Meta高级工程师现身说法:程序员干得越久,代码写得越少?(0个评论)
    • 本站zongscan祝大家除夕快乐,2023有奔头(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客