微信小程序开发难不难

微信小程序问世以来吸引了很多关注，所以开发微信小程序的人很多，但是新手开发微信小程序难吗？其实只要掌握了具体步骤！让我们看看！

准备工作

我们先确定自己要开发什么样的小程序，首先要符合“小”，因为这次要体验小程序的开发，所以尽量不要搞得太复杂；其次是“快”。小程序所需的数据和资源应该随时可用。写一个api什么的太费时间，所以不叫快速入门。

所以，如果我们能调用现成的api就太好了。经过一番选择，我选择了聚合数据历史中的api，调用这个api来获取数据。我们只需要做2页就可以完全显示出来，既“小”又“快”。

api a :“历史上的”

微信小程序开发工具

注意： api需要注册后才能使用。详情请查看汇总数据的文件。在这里，默认情况下，您已经注册并拥有相应api所需的密钥

工程结构

这里就不介绍微信开发者工具的安装和使用了。有问题可以看看微信的简单教程

首先创建一个项目，依次单击添加项目-无应用程序，然后填写项目名称，选择项目目录，然后单击添加项目

添加项目

然后让我们清理默认项目的小程序目录结构，并删除以下目录和文件

页面/日志/

pages/index/index.wxss

创建以下目录和文件

page/detail/pages/detail/detail . js

pages/detail/detail.wxml

page/templates/pages/templates/item . wxml

res/

您现在看到的目录结构应该如下所示。

app . jsapp . jsonapp . wxsspagesdetaildetail.jsdetail . wxml索引index . jsindex . wxml 9492;t emplates 9492;item . wxml 9492;res9492;utils js

这是我们项目目录的比较终结构，稍后会添加资源，但整体结构不会这样改变

修改配置

微信小程序通过修改app.json文件来改变全局配置。请参考applet文档的配置部分，了解具体的可配置项目

打开app.json，修改为

{

pages':[ 'pages/index/index '，' pages/detail/detail' ]，window':{

背景textstyle':'light '，navigation barbakgroundcolor ' : ' # 3e 3e 3e '，navigationbartitletext ' : '历史'，navigation bartexstyle ' : ' white ' }，debug': true }

在这里，我们修改了navigationbarbackgroundcolor、navigationbartextstyle和navigationbartitletext。为了方便查看调试信息，我也启动了调试模式。

全局配置并搞定，然后正式开始写微信小程序代码

主页布局

前面说了，我们要做的是一个类似“历史上的”这样的小程序，那么同一天会有很多条目，比较常见的布局就是做一个列表

列表中会有很多条目，数量不确定，所以我们不能在页面上写布局。这时，我们需要一个模板。我们可以在模板中定义代码片段，并在不同的地方调用它们。

让我们定义一个模板，打开页面/模板/item.wxml并添加代码

{{item.date}} {{item.title}}

注：有关模板使用的详细信息，请参考正式文件模板部分

接下来，打开pages/index/index.wxml并删除内容。我们将在这里写一个列表页面，我们将使用上面定义的模板

没有更多的内容。装货.装货.

您可以注意到，第一行使用import将模板引入页面，然后使用is属性声明要使用的模板，并使用data属性传入模板要使用的数据

注：模板有自己的作用域，只能使用数据传入的数据

为了测试和查看小程序的页面布局效果，我们打开pages/index/index.js删除里面的代码，然后添加下面的代码手工创建数据进行页面渲染

页面({

数据： {

hidden: true，事件： [

{

日期： '2021-10-14 '，题目：的历史}，{

日期： '2021-10-14 '，题目：的历史}，{

日期： '2021-10-14 '，题目：的历史}，{

日期： '2021-10-14 '，题目：的历史}，{

日期： '2021-10-14 '，题目：的历史}，{

日期： '2021-10-14 '，标题：“历史上的，历史上的”

]

}

})

保存后，开发工具左侧的编译查看效果

主页布局效果

注意：布局将使用图标字体，导入到res/下，样式将写在app.wxss全局样式表中。请从源代码中获取图标字体文件和样式。本教程不解释风格。

详细页面

首页的布局已经完成，暂时放下首页列表，然后开始写详情页

打开pages/detail/detail.wxml并添加以下内容

{ { detail . title } } { { detail . content } } { { item . pic _ title } }正在加载.

完成后，这个页面就像ok一样简单，现在我们打开pages/detail/detail.js来手动添加数据到这个页面看看效果

页面({

数据：{

hidden: true，详细信息： {

标题： '历史上的'，内容：“历史上的，历史上的，历史上的，历史上的”，picur :[

{

url : ' http://sjbz . fd . zol-img.com.cn/t _ s 320 x510 c/g5/m00/00/04/chmkylfjwjciyepaadcld 59 meaau-kap 0u 3 ga 90i 450 . jpg '，pic_title: '这是图片标题' }

]

}

}

})

详细页面效果

填充数据

现在页面布局已经完成，是时候调用api编写逻辑层代码来填充页面上的数据了。在我们开始之前，让我们清理一下无用的代码

打开app.js，删除无用的函数和属性

app({

})

以上步骤是额外的一步，不影响我们接下来要做的事情

打开utils/util.js，清空里面的代码，添加以下内容

//base url const api _ url _ l=' http://v.juhe.cn/todayonhistory/queryevent.php'//baseurl const api _ url _ d=' http://v.juhe.cn/todayonhistory/querydetail . php '//apply for the key by api const api _ key=' your api key '/get the event list function fetch events(today){ var promise=new promise(function(resoe，reject) {

wx.request({

url: api_url_l，数据： {

key: api_key，：

},

header : { ' content-type ' : ' application/json ' }，成功：解决，fail:拒绝

})

})回报

}函数get events { var tmp date=new date var today=tmp date . get month 1 today=today '/tmp date . get date returnfetchvents(today)。然后(function(res){//console . log(res.data.result)返回res . data . result

})。catch(function(err){ console . log(err)return[]

})

}//get details函数fetch detail(e _ id){ var promise=new promise(函数(resoe，reject) {

wx.request({

url: api_url_d，数据： {

key: api_key，e_id: e_id

},

header : { ' content-type ' : ' application/json ' }，成功：解决，fail:拒绝

})

})回报

}函数get detail(e _ id){ return fetch detail(e _ id)。然后(function(res){//console . log(res.data.result)返回res . data . result

})。catch(function(err){ console . log(err)return[]

})

} module.exports={

getevents: getevents，getdetail: getdetail

}

注意：请用您申请的密钥替换api_key的值

使用api可以获得两种数据，一种是“事件列表”，另一种是事件对应的“细节”。上面使用了es6原生提供的promise对象。详见阮一峰javascript标准参考教程(alpha)中“对象”一节

比较后，module.exports用于公开两个函数

，以便外部可以调用

我们继续打开pages/index/index.js文件，并对其进行如下修改

const util=require('././utils/util.js ')

页面({

数据： {

hidden: false，事件： []

},

onload:函数(选项){//页面初始化选项是var self=这个参数带来的页面跳转

util . getevents . then(function(data){ self . setdata({

hidden: true，事件：数据

})

})

}

})

然后打开page/detail/detail . js，修改如下

const util=require('././utils/util.js ')

页面({

数据：{

hidden: false，detail: {}

},

onload : function(param){//page初始化param是参数var self=this util . get detail(param . id)。然后(函数(结果){

self.setdata({

详细信息：结果[0]

})

})

},

onready:function{ //页面呈现完成wx.setnavigationbartitle({

title : this . data . detail . title

}) this.setdata({

hidden: true })

}

})

这里我们调用wx.setnavigationbartitle方法来动态设置导航栏的标题内容。需要注意的是，只有在页面呈现之后，也就是onready之后，才可以调用这个方法来修改导航栏的标题。

有了小程序开发工具，开发微信小程序难不是问题，你会觉得开发小程序真的很难。按照以上流程发展，祝你成功！更多相关信息，请关注源社网小节目频道。

下面是如何使用标题开头微信小程序的模糊搜索。标题到此结束

一般来说，人们想要搜索的是对精确搜索的追求。但是因为小程序不同，模糊搜索可以满足更多人使用小程序的要求。那么如何使用微信小程序的模糊搜索呢？

微信小程序上线一个月了。相对于刚上线时的讨论，小程序好像已经被遗忘了。小程序被吐槽的一个主要原因是必须要搜索准确，不容易按名字找到小程序。小程序终于改了，微信6.5.4比较新版支持模糊搜索。techweb搜索关键字“traffic”，发现有四个小程序的名称包含“traffic”。在对关键词“weather”进行测试后，我们发现在搜索结果中有20多个包含关键词“weather”的小程序。

近日，滴滴出行的一位产品经理反思了使用小程序的现状。他指出，小程序的开发者大多不合格，缺乏应用场景的硬拷贝，只把小程序当做升级的h5，生产出来的产品简直无味，弃之可惜，甚至导致用户在使用小程序的同时卸载自己产品的危机。

他给出了小程序的应用场景：四个人去吃海底捞，有人扫描了桌子上的二维码，然后和四个人分享，点了自己喜欢的菜。然后下单，填一张优惠券，用aa支付，很容易做到。

经过一个月的试水，微信小程序从发布时各方的高度关注，变得更加理性。在之前的微信公开课pro中，张小龙也明确表示小程序在微信中不会有入口，但从目前来看，微信之父可能已经食言了。

前几天微信悄悄推出了小程序搜索功能。当你在微信的搜索功能中搜索常用词(如表情、电影)时，相关的微信小程序会出现在搜索结果的顶部，而不是之前推荐的微信账号。当然这个功能只有支持小程序的比较新版本微信才有。

用户后，这些小程序就可以直接使用了，不用像腾讯之前说的扫描二维码，相比之下更方便，和运营微信账号没有太大区别。

测试显示，腾讯已经开放了包括食物、表情、音乐、电影、信息在内的更常规、更热门的关键词，但并不是所有的关键词都是开放的，但现在它将在未来支持更多种类的小程序搜索。

可见微信小程序的模糊搜索功能上线后，大家对小程序的认可度会变得更清晰，否则吐槽小程序还是很可怕的。更多相关信息，请关注源社网小节目频道。

这是第一段的结尾。下面是如何利用微信小程序的模糊搜索，在比较后添加一段。目前已经获得了298位网友的青睐！正文到此结束