精华内容
下载资源
问答
  • 新闻小程序显示网页内容
    千次阅读
    2021-12-11 10:34:59

    1、会议室预定审批:具有自动审批功能。管理员可对用户提交的会议室申请定单进行审批与调配,以便安排一些重要且紧急的会议。会议审批通过后,系统能够通过以太网将会议预订结果自动发送给参会人员及后勤服务部,后勤主管根据需求安排后勤人员进行准备工作,如排位安装及摆设,茶点布置、水果布置等服务。
    2、会议通知提醒:可以通过手机短信、邮件、钉钉、企业微信、公众号进行会议提醒通知功能,通知包括:会议预订成功、取消预订、会议变更、会前15分钟(时长可设定)提醒、会议结束提醒、通知内容手动填写(需要参加会议人员提前查看的文档,例如会议流程、着装要求、准备材料等)。 
    3、会议签到:支持手机二维码签到、人脸签到、门禁签到等功能。
    4、统计报表功能:可实现会议室使用统计及费用统计功能,选定时间段内,部门使用明细列表,统计报表, 统计各会议室使用情况,明细列表,使用次数、预订时长、实际时长、预约准确率、使用率。
    5、费用支付功能:支付手机微信支付和手机支付宝支付在线支付功能。
    6、会议室资源管理:会议室资源信息的添加、删除、修改、会议室分组、设备类型、设备注册、公用设备、服务类型。
    7、会议服务项:勾选实现,茶饮、条幅、资料、姓名牌、用餐等(后台可添加)。
    8、会议设备选项:投影、音响、视频会议设备,投影仪、白板、麦克、激光笔等(后台可添加)。
    9、会议接口融合:支持与二维码门禁系统、移动OA系统、人脸识别系统等系统对接。
    10、会议信息显示:将会议室预定信息实时传递到每个会议室门口显示屏上,信息显示屏上实现显示当前正会议室状态,显示会议名称,会议时间,会议举办单位以及各时段本会议室预定情况。
    11、会议签到功能:系统页面签到,手机二维码签到,系统自动生成签到表。
    12、会议信息引导:将会议室预定信息实时传递到大厅及楼梯口等公共通道的显示屏上,信息显示屏上实时显示当天的会议室名称、会议名称、会议时间、使用部门等预定信息列表,实现会议引导功能。
    13、会议信息发布模板编辑:可视化模板设计界面,能够设计、定制丰富的显示信息。通过模板设计器可以定制会议预订、企业文化、活动、宣传等各种的信息显示模板。

    更多相关内容
  • 总而言之,本文讲解了微信小程序项目的基本架构,以及如何学习微信小程序,以及学习微信小程序所需要的基础,还有前台渲染的基本代码。

    本文主要讲解

    一、小程序优势有哪些?

    二、学习微信小程序,需要什么基础?

    三、如何学习小程序?

    四、小程序项目的基本文件类型

    五、总结

    前言

    微信小程序作为近几年“微服务”的杰出代表,应用十分广泛。小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

    说的通俗一些,微信小程序就是微信中非常小巧的程序(这不废话......),我们打开自己手机中的微信,向下一拉,就可以看到小程序列表了。比如“腾讯QQ”这个小程序,我们可以利用它,接收QQ的消息;再入“跳一跳”,“天天象棋”这些小游戏,我们可以利用学习工作之余的短暂空闲时间玩上一把小游戏......那么,为什么微信小程序能够有如此大的发展呢?现在就来谈谈我的看法。

    笔者曾经在运维微信公众号的时候,发现了小程序的存在,后来就申请了一个,尝试着开发出了第一个属于自己的小程序。从无到有,再到现在的实战开发,虽然敲的代码都是套模板,思路也很暴力,但平时还是会积累很多小程序相关的实践经验和做一些基于微信小程序的开源项目,所以说总结微信小程序的项目经验,我觉得是我最好的成长,也希望给今年想接触微信小程序或者想从事微信小程序工作的朋友带来一些经验和思考。

    一、小程序优势有哪些?

    1、几乎不占用手机内存

    如果你的电脑是低配的话,那么你就必须要合理取舍安装的软件。笔者曾经拿学校机房的电脑做过简单实验,我给电脑安装若干杀毒软件,然后同时开始体检、木马扫描操作。实验结论:只需两个杀毒软件同时体检、杀毒操作就会导致死机,2分钟内鼠标键盘无响应且电脑无法正常工作;四个杀毒软件同时体检,电脑大概率蓝屏。

    电脑为什么会死机,会蓝屏?就是因为电脑资源耗尽。同理,你如果给自己的手机装上几十个APP,效果可想而知。微信小程序几乎不占用系统内存,能给用户,尤其是低配手机用户一个良好的体验。

    2、无需安装,用完即走

    最近因为新型冠状病毒,全国大多数学生都在参与网上教学,这个时候会涉及到很多APP。当然常用的APP,安装在手机,完全没问题,但是那些不常用的、不太需要的如何是好?比如在大学,充饭卡一个APP,冲热水卡一个APP,跑步一个APP,看新闻做题也是一个APP,要请个假也是一个APP,可能还是学校强制要求安装的,大家是否吐槽过这种行为?

    而微信小程序是建立在微信这个大平台的应用,使用时被打开,使用完毕就消失,而且随时都可被使用,做到了“用时打开,用完即走”。当然小程序还有其他优点,这里不再一一叙述。

    继续阅读,你将会了解到这些

    1、微信小程序需要的基础 2、微信小程序优势以及设计思想 3、如何学习微信小程序 4、微信小程序开发流程

    二、学习微信小程序,需要什么基础?

    阅读本文之前,建议大家最好要有以下基础知识,会写小程序的代码不一定能很好的实现业务需求和功能,要想实现不同项目需求下不同复杂度的逻辑,一定要对以下基础有充足的了解。所以在此希望大家先熟悉一下相关基础知识,好好研究一下。

    1、HTML:至少常用的标签要学会使用,比如按钮标签,文本标签,要知道一些标签是干什么用的。 2、CSS:了解类选择器、标签选择器定义和用法;了解常用的属性,比如height高度,width宽度,font-size字体大小等。 3、熟练一种编程语言:java/js/c++皆可,这里主要是要熟练变量定义、if条件判断、字符数组。 4、其他:相对/绝对路径,了解JSON格式,生命周期函数

    三、如何学习小程序?

    1、我个人认为,学习最快的方式就是实践,根据官方文档,多写几个demo是就是学习微信小程序最好的方式。 2、学习前端基础,包括但不限于HTML + CSS + JS + JQ。 3、学习小程序基础语法,了解小程序基本结构(JS、JSON、WXML、WXSS)。 4、实战,写项目。

    初学者需要注意几点:

    (1)小程序不像vue那样,修改代码按下保存后,网页上会立刻见效。每一次修改代码后,如需看效果,必须重新编译或者按Ctrl + S 保存,然后等待模拟器重新加载主页,才可查看修改后的效果。 (2)要善于调用模板或者接口,切忌大片自行编程。如果需要实现某个功能,先查询一下官网文档,是否有相应的模板或库。 (3)如果是需要对接数据库的项目,必须在开发前购买服务器,实名认证且备案,小程序开发时间一般少于服务器审核时间(对于小项目来讲),小程序请求的地址必须是已备案的域名。 (4)不要使用传统编程思想来看待小程序开发,小程序不像Java那样可以随心应手的写,其部分功能未必能够实现。

    四、小程序项目的基本文件类型

    首先是开发工具!磨刀不误砍材工,要想高效率的开发,必须要熟练使用开发工具(IDE)。下面我们先来了解一下微信小程序的专属开发工具。

    官网下载地址: developers.weixin.qq.com/miniprogram…

    第一块区域是模拟器区域,是我们代码效果的直接显示,按下CTRL + S 或者编译键,模拟器区域会刷新显示我们的界面。

    第二块区域是项目结构页面,一个小程序主体部分由三个文件组成,必须放在项目的根目录,分别是:JS(小程序逻辑)、JSON(小程序公共配置)、WXSS(小程序公共样式表)。每个分页面分为JS(页面逻辑)、JSON(页面配置)、WXML(页面结构)、WXSS(页面样式表)四个模块,且描述页面的四个文件必须具有相同的路径与文件名。

    第三块区域就是我们编写代码的区域,占用了大部分的屏幕。

    第四块区域是调试区域,小程序可以通过console.log()向控制台输出临时的信息,就相当于C++的cout<<"hello zwz"<<endl; 也相当于Java的syso。这时候这些临时信息会在这个区域显示,方便我们调试程序。

    第五块区域就是常用的功能模块,这里点击编辑,代码区会自动保存,模拟器会重新加载界面;点击上传代码,会发送到微信公众平台上,然后用于发布小程序。

    其中第二块区域的项目结构,我们重点介绍

    第一块:JSON

    上面提到:每个分页面分为JS(页面逻辑)、JSON(页面配置)、WXML(页面结构)、WXSS(页面样式表)四个模块,那么这些页面分别都有什么用途呢?

    JSON是页面配置文件,可以对本页面的窗口表现进行配置,文件内容为一个 JSON 对象,会涉及到很多的属性。

    比如navigationBarTitleText 就是显示在小程序最上方的标题名称。

    页面中配置项在当前页面会覆盖总的app.json的中相同的配置项。

    第二块:WXML

    WXML其实就是HTML,是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。

    比如最常用的双向数据绑定:

    index.wxml

    index.js

    这样,我们虽然在WXML界面没有直接写文字,但{{msg}}就直接读取到了JS文件的变量值。 这时,我们按下CTRL + S(保存,重新编译),我们会发现前台会渲染出 hello zwz。 这就是传说中的双向数据绑定,你把JS后台的 hello zwz 改成 hi zwz,那么前台也会显示 hi zwz,以此类推。

    同理,如果是数组:

    在JS页面的Page的data下,加上array变量,作为普通数组

    接着将WXML界面的msg替换成array,界面则会显示如下:

    本文原创首发CSDN,链接  blog.csdn.net/qq_41464123… ,作者博客blog.csdn.net/qq_41464123

    第三块:WXSS

    WXSS和CSS一样,是一套样式语言,用于描述 WXML 的组件样式,WXSS 用来决定 WXML 的组件应该怎么显示。WXSS在实际开发过程中,拥有绝大部分CSS的内容。 那么相比CSS而言,WXSS中独有的rpx单位可能会用得到,这个尺度单位可以根据屏幕宽度进行自适应。 具体格式如下所示,下面是用了类选择器对WXML中的元素进行样式美化。

    第四块:JS

    这一块毫无疑问,就是用来存放后端逻辑代码的,我们需要掌握几个常用的生命周期函数,

    然后就是自定义方法,注意是和onLoad()平级。

    比如,我们在WXML内定义一个按钮

    接着,在JS页面编写响应事件

    那么,我们在点击这个按钮之后,就会触发run()这个方法。

    五、总结

    总而言之,本文讲解了微信小程序项目的基本架构,以及如何学习微信小程序,以及学习微信小程序所需要的基础,还有前台渲染的基本代码。

                                                                                 👇🏻 添加 博主 获取源码资料👇🏻  

    展开全文
  • 微信小程序实战--基于微信小程序新闻客户端

    万次阅读 热门讨论 2016-11-04 17:56:07
    简介:这是一个新闻客户端的小程序版本,当然不能跟网易、腾讯之类的新闻客户端相比,这只是一个比较简易的版本。 注:11月3日微信已经开始了小程序的公测,所以下面的IDE破解过程可以省略。demo的源代码已经上传到...

    wechat-newsapp

    简介:这是一个新闻客户端的小程序版本,当然不能跟网易、腾讯之类的新闻客户端相比,这只是一个比较简易的版本。

    注:11月3日微信已经开始了小程序的公测,所以下面的IDE破解过程可以省略。
    demo的源代码已经上传到github,地址:https://github.com/xianyanbu/wechat-newsapp

    演示效果如下

    demo

    IDE的破解安装

    由于微信小程序现在属于内测阶段,所以还没有正式的版本开放给所有的开发者,所以想要体验小程序的开发只能使用破解版的客户端。

    详情请见https://github.com/gavinkwoe/weapp-ide-crack/

    里面有详细的破解安装过程,这里就不再赘述了,破解完成导入项目即可。

    首页

    一些组件和框架的详细使用方法参见微信小程序开发文档

    效果

    layout 这里写图片描述

    按照新闻所述领域和性质显示新闻列表,如,【头条】、【科技】等

    页面头部

    <view class="top-bar">
        <view class="top-bar-item" id="top" catchtap="onTapTag">头条</view>
        <view class="top-bar-item" id="shehui" catchtap="onTapTag">社会</view>
        <view class="top-bar-item" id="guonei" catchtap="onTapTag">国内</view>
        <view class="top-bar-item" id="guoji" catchtap="onTapTag">国际</view>
        <view class="top-bar-item" id="yule" catchtap="onTapTag">娱乐</view>
        <view class="top-bar-item" id="tiyu" catchtap="onTapTag">体育</view>
        <view class="top-bar-item" id="junshi" catchtap="onTapTag">军事</view>
        <view class="top-bar-item" id="keji" catchtap="onTapTag">科技</view>
        <view class="top-bar-item" id="caijing" catchtap="onTapTag">财经</view>
        <view class="top-bar-item" id="shishang" catchtap="onTapTag">时尚</view>
      </view>

    catchtap类似于onclick,点击触发onTapTag事件,加载对应类别的新闻列表。

    新闻列表

    <scroll-view class="posts-list" style="height:100%" scroll-y="true">
        <block wx:for="{{postsList}}">
          <view class="posts-item" index="{{index}}" id="{{item.url}}" catchtap="redictDetail">
              <image class="author-avatar" src="{{item.thumbnail_pic_s}}"></image>
            <view class="posts-title">{{item.title}}</view>
            <view class="author">
              <view class="author-name">{{item.author_name}}</view>
              <view class="posts-last-reply">{{item.last_reply_at}}</view>
            </view>
          </view>
        </block>
      </scroll-view>

    wx:for

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

    默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item

    <view wx:for="{{items}}">
      {{index}}: {{item.message}}
    </view>

    block wx:for

    因为wx:for 是一个控制属性,需要将它添加到一个标签上。但是如果我们想一次性操作多个组件标签,我们可以使用一个`标签将多个组件包装起来,并在上边使用wx:for`控制属性。

    注意: block并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

    新闻详情页

    点击新闻后触发redictDetail事件跳转到详情页。

    效果

    这里写图片描述这里写图片描述

    新闻标题

    <view class="detail-post">
        <view class="detail-post-header">
          <view class="detail-post-title">{{ detail.title }}</view>
        <view class="detail-post-meta">
          <view class="detail-post-info">
            <view class="detail-post-time">{{ detail.src }}</view>
          </view>
        </view>
        </view>

    新闻内容

    <view class="detail-post-content" wx:for="{{detail.item}}">
          <text class="content-info" index="{{index}}" wx:if="{{item.type == 'text'}}">{{ item.content }}</text>
          <image class="content-info" index="{{index}}" wx:elif="{{item.type == 'img'}}" src="{{item.content}}"></image>
    </view>

    wx:if

    wx:if="{{condition}}"来判断是否需要渲染该代码块:

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

    wx:elifwx:else来添加一个else块,如:

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

    获取新闻列表

    http请求,wx.request(OBJECT)使用方法

    ​ wx.request发起的是https请求。一个微信小程序,同时只能有5个网络请求连接。

    OBJECT参数说明:

    参数名类型必填说明
    urlString开发者服务器接口地址
    dataObject、String请求的参数
    headerObject设置请求的header , header中不能设置Referer
    methodString默认为GET,有效值:OPTIONS,GET,HEAD,POST,PUT,DELETE,TRACE,CONNECT
    successFunction收到开发者服务成功返回的回调函数,res = {data:”开发者服务器返回的内容”}
    failFunction接口调用失败的回调函数
    completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

    示例代码:

    wx.request({
      url: 'test.php',
      data: {
         x: '' ,
         y: ''
      },
      header:{
          "Content-Type":"application/json"
      },
      success: function(res) {
         var data = res.data;
      }
    });

    这里使用了聚合数据提供的免费新闻API–新闻头条,通过http请求获取新闻列表。

    请求示例:http://v.juhe.cn/toutiao/index?type=top&key=APPKEY

    返回结果示例:(json格式)

    {
        "reason": "成功的返回",
        "result": {
            "stat": "1",
            "data": [
                {
                    "title": "巫山云雨枉断肠:女摄影师Erika Lust记录的性爱",/*标题*/
                    "date": "2016-06-13 10:31",/*时间*/
                    "author_name": "POCO摄影",/*作者*/
                    "thumbnail_pic_s": "http://09.imgmini.eastday.com/mobile/20160613/20160613103108_7b015493398e7fd13dda3a5c
    e315b1c8_1_mwpm_03200403.jpeg",/*图片1*/
                    "thumbnail_pic_s02": "http://09.imgmini.eastday.com/mobile/20160613/20160613103108_7b015493398e7fd13dda3a5ce315
    b1c8_1_mwpl_05500201.jpeg",/*图片2*/
                    "thumbnail_pic_s03": "http://09.imgmini.eastday.com/mobile/20160613/20160613103108_7b015493398e7fd13dda3a5ce315
    b1c8_1_mwpl_05500201.jpeg",/*图片3*/
                    "url": "http://mini.eastday.com/mobile/160613103108379.html?qid=juheshuju",/*新闻链接*/
                    "uniquekey": "160613103108379",/*唯一标识*/
                    "type": "头条",/*类型一*/
                    "realtype": "娱乐"/*类型二*/
                },
    ...]}}

    在这个demo里,当页面第一次加载或者点击切换新闻列表时,会发起http请求获取新闻列表。

    发起请求

    wx.request({
          url: Api.getNewsList(data),
          success: function (res) {
              console.log(res);
            self.setData({
              postsList: self.data.postsList.concat(res.data.result.data.map(function (item) {
                item.last_reply_at = util.getDateDiff(new Date(item.date));
                return item;
              }))
            });
            setTimeout(function () {
              self.setData({
                hidden: true
              });
            }, 300);
          }
        });

    获取新闻详情

    由于聚合数据提供的API返回的只是新闻列表,以及新闻指向的具体URL。没有提供接口返回某条新闻的具体内容。而且微信小程序目前没有webview,无法直接跳转到对应的新闻地址。所以,如果我们想要将数据呈现出来,必须要对获取的网页内容进行切割,抓取我们需要的数据,进行渲染。

    获取网页内容

    在获取数据列表的时候,有每条新闻具体指向的URL地址。通过http请求该地址,即返回网页的内容(字符串形式)。请求方法和获取列表的方法一样,使用wx.request(OBJECT)

    内容切割

    这部分内容只是一些字符串的操作,不必深究。

    数据请求和内容切割的代码如下:

      wx.request( {
          url: Api.getNewsByUrl( id ),
          success: function( res ) {
    
            var arrContent = [];
    
            var tmpStr = res.data;
            var doSearch = true;//循环控制
    
            //object 获取整篇文章的图片和文字段落数量
            var allText = res.data.match( /(<p class="section txt">).*(?=\<\/p\>)/ig );
            var allImg = res.data.match( /(<a class="img-wrap").*(?=\<\/a\>)/ig );
            var allContentNum = allText.length + allImg.length;
    // 获取新闻标题
            var title = tmpStr.match( /(<h1 class="title">).*(?=\<\/h1\>)/ig )[ 0 ].replace( '<h1 class="title">', '' );
            // 获取文章来源
            var srcInfo = tmpStr.match( /(<span class="src">).*(?=\<\/span\>)/ig )[ 0 ].replace( '<span class="src">', '' ).replace( '&nbsp;&nbsp;&nbsp;&nbsp;', ' ' );
    
            var contentType = null;//接收内容的类型,文字或图片
            var text = {};
            var img = {};
    
            while( doSearch ) {
    
              var tmpObj = {
                'type': null,
                'content': null
              };
              // console.log( tmpStr );
    
    // 注:这里的正则表达式,跟上面的正则基本是一样的,只是在最后少一个g属性,加上g表示获取所有符合条件的数据,不加g表示获取第一个符合条件的数据
    // 截取文章中出现的第一个文字段落的信息
              text = tmpStr.match( /(<p class="section txt">).*(\<\/p\>)/i );
              // 获取文章中出现的第一张图片的信息
              img = tmpStr.match( /(<a class="img-wrap").*(\<\/a\>)/i )
    
              // console.log( text );
              // console.log( img );
    
              if( text != null && img != null ) {
                if( text.index > img.index ) {//第一张图片出现的位置,小于第一段文字出现的位置,所以先显示图片
                  contentType = 'img';
                } else {
                  contentType = 'text';
                }
              } else if( text == null && img != null ) {
                contentType = 'img';
              } else if( img == null && text != null ) {
                contentType = 'text';
              } else {
                contentType = null;
              }
    
              if( contentType == 'text' ) {//文字
                text = tmpStr.match( /(<p class="section txt">).*(\<\/p\>)/i );//获取一段文字内容(对象类型)
                var content = text[ 0 ].substring( text[ 0 ].indexOf( ">" ) + 1, text[ 0 ].lastIndexOf( "</" ) );
                tmpObj.type = 'text';
                tmpObj.content = content;
                arrContent.push( tmpObj );
                tmpStr = tmpStr.substring( text.index + text[ 0 ].length, tmpStr.length );
              } else if( contentType == 'img' ) {//图片
                img = tmpStr.match( /(<a class="img-wrap").*(\<\/a\>)/i )
                // console.log(img);
                // 默认图片类型为jpg
                var imgType = 'jpeg';
                if( img[ 0 ].indexOf( ".jpeg" ) == -1 ) {
                  imgType = 'png';
                }
                var content = img[ 0 ].substring( img[ 0 ].indexOf( "http" ), img[ 0 ].indexOf( imgType ) + imgType.length );
                tmpObj.type = 'img';
                tmpObj.content = content;
                arrContent.push( tmpObj );
                index = tmpStr.indexOf( '</figure>' );
                tmpStr = tmpStr.substring( index + 11, tmpStr.length );
              } else {
                doSearch = false;
              }
    
    
              if( arrContent.length >= allContentNum ) {
                doSearch = false;
              }
    
              // console.log( tmpObj );
              // console.log( arrContent );
            }
    
    
            var DATA = {
              'title': title,
              'src': srcInfo,
              'item': arrContent
            }
    
            self.setData( {
              detail: DATA
            });
            setTimeout( function() {
              self.setData( {
                hidden: true
              });
            }, 300 );
          }
        });

    总结

    就目前的感受来说,小程序的内容还不是太完善,比如没有webview,不管怎么说还是比较期待后续的版本^_^。

    项目地址:https://github.com/xianyanbu/wechat-newsapp

    展开全文
  • 如何快速开发一个自己的微信小程序

    万次阅读 多人点赞 2018-07-18 01:15:24
    1.为什么要学小程序开发? &nbsp; &nbsp; 对于前端开发而言,微信小程序因为其简单快速、开发成本低、用户流量巨大等特点,也就成了前端开发工程师必会的一个技能。 &nbsp; 2.先看看小程序效果 (1...

    一.写在前面

    1.为什么要学小程序开发?

        对于前端开发而言,微信小程序因为其简单快速、开发成本低、用户流量巨大等特点,也就成了前端开发工程师必会的一个技能。

     

    2.先看看小程序效果

    (1)欢迎页

     

     

    (2)首页:轮播头图,天气,豆瓣电影正在热映

     

     

    (3)全国城市切换页

     

    (4)天气详情页

     

    (5)地图周边服务

     

    (6)豆瓣电影

     

     

    (7)热点新闻

     

    (8)更多页面

     

    3.开发准备:

    1)有人开玩笑说,会vue小程序根本都不用学:

    微信小程序虽然是腾讯自己搞的,但是核心的思想跟vue等框架是一样一样的哦~

    2)善于搜集精美的小组件: “我们不生产代码,我们只是代码的搬运工”,善于找到想要的组件并把他们巧妙优雅的组装成一个大项目,也算是程序员一项基本技能了。

    具体怎么找到想要的小程序demo,篇末会给大家推荐小程序的资源,有很多大神的项目哦

     

     

     

     撸起袖子开干了

     

    一.注册小程序账号,下载IDE

    1.官网注册https://mp.weixin.qq.com/,并下载IDE。

    2.官方文档一向都是最好的学习资料。

    注意:

    (1)注册账号之后会有一个appid,新建项目的时候需要填上,不然很多功能是用不了的,比如不能预览,不能上传代码等等。

    (2)如果你注册过微信公众号的话,一定要注意,微信公众号和小程序是两个账号,二者的appid也是不同,小程序开发必须使用小程序的appid哦。

     

    二.小程序框架介绍和运行机制

    1.我们建立了“普通快速启动模板”,然后整个项目目录如下:

    2.app.js

    整个项目的启动文件,如注释写的onlaunch方法有三大功能,浏览器缓存进行存和取数据;用登陆成功的回调;获取用户信息。

    globalData是定义整个项目的全局变量或者常量哦。

     

    3.app.json

    整个项目的配置文件,比如注册页面,配置tab页,设置整个项目的样式,页面标题等等;

    !注意:小程序启动默认的第一个页面,就是app.json的pages中的第一个页面哦。

    4.pages

    小程序的页面组件,有几个页面就会有几个子文件夹。比如快速启动模板,就有两个页面,index和logs

    5.打开index目录

    可以看到有三个文件,其实和我们web开发的文件是一一对应的。

    index.wxml对应index.html;

    index.wxss对应index.css;

    index.js就是js文件哦。

    一般我们还会给每个页面组件添加一个.json文件,作为该页面组件的配置文件,设置页面标题等功能

    6.双击index.js文件

    (1)var app = getApp(); 

    引入整个项目的app.js文件,用来取期中的公共变量等信息。

    如果要使用util.js工具库中的某个方法,在util.js中module.exports导出,然后在需要的页面中require即可得到哦。

    (2)比如,我们要获取豆瓣电影的时候,我们需要调用豆瓣的api;我们先在app.js中的gloabData中定义doubanBase

    然后在index.js中使用app.globaData.doubanBase即可取到这个值。

    当然这些常量你也可以在页面需要的时候,再用写死的值,但是为了整个项目的维护,还是建议把这种公用参数统一写在配置文件中哦。

     

    (3)接下来在整个page({})中,第一个data,就是本页面组件的内部数据,会渲染到该页面的wxml文件中,类似于vue、react哦~

    通过setData修改data数据,驱动页面渲染

    (4)一些生命周期函数

    比如onload(), onready(), onshow(), onhide()等等,监听页面加载、页面初次渲染、页面显示、页面隐藏等等

    更多的可以查官网API哦。其中用的最多的就是onload()方法,和onShareAppMessage()方法(设置页面分享的信息)

     

    7 .wxml模板的使用。

    比如本项目电影页面,就是以最小的星级评价组件wxml当做模板,star到movie到movie-list,一级一级的嵌套使用。

     star-template.wxml页面写好name属性;然后import引入的时候通过name获得即可

     

    8.常用的wxml标签

    view,text,icon,swiper,block,scroll-view等等,这些标签直接查官网文档即可

     

     

    三.小程序框架、各个页面以及发布上线的注意点

     

    1.整个框架中的一些注意点

    (1)整个wxml页面,最底层的标签是<page></page>哦。

    (2) 每个页面顶部导航栏的颜色,title在本页面的json中配置,如果没有配置的话,取app.json中的总配置哦。

    (3)json中不能写注释哦,不然会报错的。

    (4)路由相关

    1)使用wx.SwitchTab跳转tab页的话,在app.json中除了注册pages页面,还需要在tabBar中注册tab页,才能生效哦。

    注意:tab最多5个,也就是我们说的头部或者底部最多5个菜单。其他的页面只能通过其他路由方法打开哦。

    2)navigateTo是跳到某个非tab页,比如欢迎页,电影详情页,城市选择页;在app.json中注册后,不能在tabBar里注册哦,不然同样也是不能跳转的哦。

    3)reLaunch跳转,新开的页面左上角是没有退回按钮的,本项目只用了一次,切换城市的时候哦。

    (5)页面之间传递参数

    参数写在跳转的url之中,然后另一个页面在onload方法中的传参option接收到。如下传递和获取id

     

    (6)data-开头的自定义属性的使用

    比如wxml中我们怎么写 

    点击的事件对象可以这么取,var postId = event.currentTarget.dataset.postid;

    注意: 大写会转换成小写,带_符号会转成驼峰形式

    (7)事件对象event,event.target和event.currentTarget的区别:

    target指的是当前点击的组件 和currentTarget 指的是事件捕获的组件。

    比如,轮播图组件,点击事件应该要绑定到swiper上,这样才能监控任意一张图片是否被点击,

    这时target这里指的是image(因为点击的是图片),而currentTarget指的是swiper(因为绑定点击事件在swiper上)

    (8)使用免费的网络接口:

    本项目中用到了 和风天气api,腾讯地图api,百度地图api,豆瓣电影api,聚合头条新闻api等,具体用法可以看各自官网的接口文档哦,很详细的

    注意:免费接口是有访问限制的,所以如果用别人的组件用了这种接口的话,最好还是自己注册一个新的key替换上哦

    附上一个免费接口大全:

    https://github.com/jokermonn/-Api

    !!另外还要注意,要把这些接口的域名配置到小程序的合法域名中,不然也是访问不了的

    (8)wxss有一个坑:无法读取本地资源,比如背景图片用本地就会报错哦。

    把本地图片弄成网络图片的几种方式: 上传到个人网站;QQ空间相册等等也是可以的哦

     

     

    2.切换城市页面:

    (1)首页使用navigateTo跳转到切换城市页,由于首页并没有关闭,导致切换了城市返回来,天气信息还是旧的。

    正确的处理逻辑如下:

    1)使用reLaunch跳转到切换城市页面,实质是关闭所有页面打开新的页面哦。

    2)切换城市页面,更新公共变量中城市信息为手动切换的城区,再switchTab回到首页,触发首页重新加载。

    3)首页获取城市信息的时候加一个判断,全局没有才取定位的,全局有(比如刚才设置了)就用全局的哦。

    (2)城市列表的滚动和回到顶部

    基于scroll-view组件的scroll-top属性,初始就是0,滚动就会增加的;点击回到顶部给它置为0即可回到顶部

     

     

    3.天气页

    (1)初始化页面,天气显示的逻辑

    首先调用小程序的wx.getLocation方法获得当前的经纬度,然后调用腾讯地图获得当前的城市名称和区县名称,并存到公共变量中,

    再调用查询天气和空气质量的方法哦。

    (2)容错处理

    城市的名称长短不一,有点名字特别长,比如巴彦淖尔市这种,需要动态的获取完整的城市名称;

    有些偏僻的城市暂时没有天气信息,我们需要对返回的结果进行判断,没有信息的需要给用户一个良好的提示信息。

     

     

    4.周边-地图服务页面

    (1)调用百度地图的各种服务,查询酒店,美食,生活服务三种信息,更多信息可以看百度地图的文档

    (2)点击时给被点中的图标加个边框,数据驱动视图,所以使用一个长度为3的数组保存三个图标当前是否被点中的状态

    然后wxml再根据数据来动态添加class,增加边框样式

     

    5.豆瓣电影页

    (1)电影详情页的预览图片,用小程序本身的previewImage实现。

    (2)详情页使用onReachBottom()方法,监控用户上拉触底事件,然后发送请求继续获得数据,实现懒加载的效果

    (3)用户体验方面的优化,js中将整数评分比如7分统一改为7.0分,然后wxml模板再判断分数是否为0显示“暂无评分”

    (4)搜索之后清空搜索框

    因为小程序中不能使用getelementbyId这种方式获得元素,只能用数据来控制了

    在data中加一个属性searchText来保存搜索框的内容并和 input的value属性绑定,搜索完成或者点击X时,searchText变量清空即可实现清空输入框的效果哦。

     

    6.新闻页面

    (1)聚合头条新闻的免费接口,只返回了新闻的基本信息,新闻的主体内容是没有的哦。

    我找了好多新闻类的接口,好像都是没有新闻主体内容的。如果谁知道更好的接口欢迎留言告诉我哈~

    (2)当然,也可以自己去爬新闻网站的数据哦

     

    7.更多页面

     (1)小程序目前开放外链的功能只是给公司组织的小程序开放了,个人开发还是不能使用外链的哦。

     (2)彩蛋页面,获得用户信息

    通过 wx.setStorageSync(‘userInfos’, userInfos);  可以获得登陆小程序的用户的个人信息,可以发送给后台存到数据库中,方便对用户进行分析

    我这里只是存储到浏览器缓存中哦,最大应该是10M缓存;如果用户把这个小程序从小程序列表中删除掉,就会清空这个缓存。

     

    8.发布注意

    (1) 新版本小程序发布的限制为2M,一般都是图片最占空间,所以尽量使用网络图片

    具体怎么把本地图片变成网络图片,上面有讲哦。

    (2)在开发者工具上预览测试没问题,点击上传;网页版小程序个的人中心的左侧“开发管理”菜单,第三块–开发版本就有了内容。

    (3)点击提交,填写小程序相关信息,就可以提交审核了哦。

    注意:分类最好填写准确,这样才能更快的通过审核哦。我这个小程序一天半时间过审上线的

     

     

    至此,我就把两天开发内碰到的坑和注意点都过了一遍,据说还有更多的坑,等之后更深入的开发再继续研究咯。

     

     

    四.写在最后

    1.推荐几个小程序开发的资料

    (1)知乎一篇小程序的资料:

    https://www.zhihu.com/question/50907897

    (2)小程序社区

    http://www.wxapp-union.com/portal.php

    (3)极乐小程序商店

    http://store.dreawer.com/

    2.本项目的github地址

     https://github.com/yllg/WXxcx

      


    转自:https://www.cnblogs.com/xuanbiyijue/p/7980010.html
    展开全文
  • 零基础入门小程序云开发云函数
  • 微信小程序 实现疫情动态功能

    千次阅读 2021-06-10 08:57:09
    做毕设前端微信小程序的时候,因为要用web-view做疫情动态功能,因此需要找现有疫情动态公布的url! 最终不负所望,终于找到了,还弄成了由用户自由选择丁香园、百度健康、腾讯健康的疫情动态进行查看。 各大网站...
  • 如何学习微信小程序? 学习微信小程序所需基础

    万次阅读 多人点赞 2020-03-30 16:23:19
    小程序是一种新的开放能力,开发者可以快速地开发一个小程序小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 说的通俗一些,微信小程序就是微信中非常小巧的程序(这不废话......),我们打开...
  • 微信小程序开发基础教程

    千次阅读 2020-06-28 14:08:18
    微信小程序(Wechat Mini Program)简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。这次微信小程序的推出,应该更会激发...
  • 微信小程序之“无人机新闻”开发文档 源码连接 https://github.com/LiuGuoXiangIamI/drone-news 目录: 开发前的准备; 微信小程序前端开发 管理网站前端开发 数据库设计 后端开发 前后端交互方法 Bug总结 ...
  • 微信小程序顶部导航栏十分常见、尤其是在新闻类的小程序里,常见的导航栏有可水平滑动导航栏、居中导航栏、平分导航栏,本文手把手教你完成水平导航栏。 以《报修小程序源码》为基础拓展讲解平分导航栏 传送门:...
  • 现在上网已经成为一种新的生活方式,那么在使用浏览器看新闻的生活发现网页显示不全怎么办呢?别着急,今天编就来给大家说说网页显示不全的怎么处理,一起来看看吧。网页显示不全怎么办1.首先打开ie浏览器,在ie...
  • 您好访客,在这里您将找到渐进式Web应用程序的基本模板,该PWA显示了最新的技术新闻,并使用新闻API ( )请求信息。 此仓库由4个分支组成: app-shell:包括Web应用程序的基本结构。 (HTML,JS,CSS) 服务工作...
  • 2、使用CSS对新闻网页内容的样式进行设置: 新闻标题按照“红橙黄绿蓝紫”的方式显示标题; 新闻有主标题和新闻来源信息,主标题与副标题使用不同的字体于不同大小显示; 段落的行高设置为2em,首行缩进; 使用...
  • 常用API开发技巧学习笔记第一章 认识微信小程序前后端分离的开发方式小程序的特点小程序对开发者的影响学习小程序需要的基础第二章 小程序环境搭建与开发工具介绍小程序开发环境 第一章 认识微信小程序   微信...
  • 实现数据库中信息在网页显示

    千次阅读 2021-08-10 21:15:40
    文章目录一、java读取数据库中信息1、java中定义类存放数据库记录2、JDBC读取数据库信息二、web网页显示信息内容1、在java页面跳转到.jsp文件展示数据2、设置网页界面显示三、显示结果 一、java读取数据库中信息 1、...
  • 昨日深夜,微信团队推出两条重磅新闻小程序内可直接打开网页小程序可关联500个公众号。 面对这两条惊天动地的大新闻,朋友圈的一群大佬儿和开发者一下子就兴奋了起来,笔者也是刚说完“小程序不能跳转H5”马上...
  • 百度新闻小偷 v1.06

    2021-05-10 17:19:11
    提示:此版本做交流用,请勿正式使用,否则可能导致百度新闻屏蔽服务器IP,对网页收录不影响,只是不能显示小偷采集数据!大家在看官方的时候可能和发布的版本有所区别,但是不影响正常使用。具体可以看下面介绍发布...
  • 2017-01-10 jackwelton 小程序网页开发 恭喜各位有缘的朋友看到小编这篇文章,你们赚大了! 你知道微信如何使用吗? 微信公众号使用方法或教程链接: http://url.cn/43Y4ZlX 很多人不知道 ...
  •  对于前端开发而言,微信小程序因为其简单快速、开发成本低、用户流量巨大等特点,也就成了前端开发工程师必会的一个技能。  2.开发准备:  (1)有人开玩笑说,会vue小程序根本都不用学:  微信小程序虽然是...
  • 目录 1 绪论 2 1.1 研究背景 2 1.2 教务查询系统的现状和发展前景 3 1.3 系统的技术架构 3 ...8.新闻公告 6 9.我的课程 6 10.个人信息 6 2.3 系统用例图 6 2.4 技术平台 7 2.4.1 Spring Boot 7 2.4.2 微信
  • 影任有料,总有一款是你想要影任J作为一个不资深且跑路的...01F12改网页内容百度知道的知道日报改为影任日报影任之后再无江湖,更改大V微博内容腾讯新闻新闻标题更改为影任J到会教程:第一步:打开网页,按一下F1...
  • 微信小程序简答题

    千次阅读 2021-12-25 00:12:48
    JSON采用完全独立于程序语言的文本格式,但是也使用了类C语言的习惯。这些特性使JSON成为理想的数据交换语言。XML是一种简单的数据存储语言。使用一系列简单的标记描述数据,而这些标记可以用方便的方式建立,虽然...
  • (转) 两天快速开发一个自己的微信小程序

    万次阅读 多人点赞 2018-04-22 21:59:54
    转自 https://www.cnblogs.com/xuanbiyijue/p/7980010.html一.写在前面1....先放上我做的小程序可以在微信小程序搜索“悬笔e绝”,或者用微信扫描下面的二维码哦 (1)欢迎页:这个logo是当年念大学给...
  • 本人也是小程序开发小白,文中如有错误多谢指出,共同进步! 介绍 小程序的特点以及和传统App的区别 开发工具 官方下载地址 微信开发者工具 官方文档 官方文档!小程序官方文档 熟悉代码...
  • 对于前端开发而言,微信小程序因为其简单快速、开发成本低、用户流量巨大等特点,也就成了前端开发工程师必会的一个技能。 2.先放上我做的小程序 可以在微信小程序搜索“悬笔e绝”,或者用微信扫描下面的二维码...
  • 微信小程序学习资料——转载

    千次阅读 2018-10-23 06:25:56
    注:本文转载知乎上的...微信小程序正式公测,张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存;ctrl+S; 1:官方工具:mp.weixin.qq.com/debug/w .....
  • 第一章:什么是微信小程序 1-1 开篇及课程特色介绍 1、老师id:小楼昨夜又秋风:https://zhuanlan.zhihu.com/oldtimes ,知乎id:七月在夏天。 2、实践式学习小程序开发:官方api文档 1-2 直观感受一下微信...
  • 爬虫爬取新闻实战01:小白如何迅速学会爬虫爬取千条新闻 文章目录爬虫爬取新闻实战01:小白如何迅速学会爬虫爬取千条新闻1.前言2 .爬虫原理介绍2.1.图片爬虫2.2 文字爬虫3.用八爪鱼爬取新闻链接4.结语4.结语 1.前言 ...
  • 百度新闻小偷 v1.06.rar

    2019-08-30 15:19:27
    百度新闻小偷程序,本程序为开源程序,大家可以随意更改,出现任何纠纷与作者无关, ...提示:此版本做交流用,请勿正式使用,否则可能导致百度新闻屏蔽服务器IP,对网页收录不影响,只是不能显示小偷采集数据!

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,621
精华内容 11,448
热门标签
关键字:

新闻小程序显示网页内容