零基础搭建wx小程序

从零搭建微信小程序的几大步骤和坑

说起这个小程序,真是今年在家待着最大的成果了,从接触到上线用了十天左右,后来又做出了搜索的功能,就是一个有点类似商城的东西,起一个分类和介绍的作用。特此回顾一下重要的环节,后续还有很多地方需要修改。

:数据都在页面上,纯前端,有个云开发的选项做完了才发现,可能不错。

下载使用微信开发者工具

如果是个人学习用,可以创建个人主体的账号,如果是商用或者涉及公司版权,就创建企业主体的,不过好像可以迁移,不要紧。

这里默认已经下好了软件,APPID可以先申请一个,放在那里,创建项目时先用测试号。

探索初识

下面这几个自带的文件是管控整个小程序的配置:

1
2
3
4
5
app.js
app.json
app.wxss
project.config.json
sitemap.json

wxss里可以引入外带的wxss文件,例如:

@import '/class/icon.wxss';

project.config.json我只是在上线的时候,需改了APPID。

tabbaricontitle修改在app.json里,创建新页面后,会生成有一个叫这个名字的文件夹:

"pages/notice/notice/notice",
"pages/notice/list/list",

建议像上面这样子创建,就会有多级的文件夹,好处多多,不过一开始我也是

"pages/index/index",
"pages/fir/fir",
"pages/category/category",

这样建的,现在不推荐。

页面跳转

实现功能:从B页面,点击商户C,跳转到A页面。

刚开始弄的时候以为一个页面需要创建一个文件夹,那么100个商户就是100个文件夹,建到几十个的时候,跟我说超过2M了不让上传…真是z了..

原来正确的办法是想象一个空页面A,并且设置好格式排版,每次从B页面点击商户C的时候往A页面传入该商户C的数据。

所以数据应该放在B页面,通过一个key确定是点了这个商品C,然后把C的数据扔到A那里,实现从B到A的跳转。

代码如下:

1
<view wx:for="{{category[curIndex].children}}" wx:key="index" data-name2="{{item.name2}}" data-lunyu="{{item.lunyu}}" data-method="{{item.method}}" bindtap="jumpdetail">

这块有四个详细步骤,我都列了出来。

在B页面存储数据

wx:for="{{category[curIndex].children}}" wx:key="index"

我是循环从.js文件里的的page-data取数据,具体查阅wx:forwx:ifwx:key的用法,先让你的B页面能正常显示后,再考虑页面跳转的事。

提取商户C的数据

data-name2="{{item.name2}}" data-lunyu="{{item.lunyu}}" data-method="{{item.method}}"

格式是data-传给js文件的变量名字="{{传的字段}}" 具体查阅data-的用法,这样就把name2,lunyu,method传给.js了。

创建一个bindtap动作

bindtap="jumpdetail"

js里写个叫jumpdetail的动作,我一开始不熟练,就用console.log(e)多输入几次,每点一次商户C,都会输出很多信息,在里面找你上一步data-传的那几个变量名字,然后用let取得,最后用wx.navigateTo把数据扔到A页面上就好了。

1
2
3
4
5
6
7
8
9
jumpdetail: function (e) {
//console.log(e)
let name2 = e.currentTarget.dataset.name2
let lunyu = e.currentTarget.dataset.lunyu
let method = e.currentTarget.dataset.method
wx.navigateTo({
url: "/pages/detail/detail?name2=" + name2 + '&lunyu=' + lunyu + '&method=' + method,
})
},

在A页面上接收B页面传来的数据

此时我的A页面是叫detail,那我就在detail这个文件夹里去找detail.js,然后写在onload里加载数据:

1
2
3
4
5
6
7
8
onLoad: function (options) {
var that = this;
that.setData({
name2: options.name2,
lunyu: options.lunyu,
method: options.method,
});
},

然后你的data里要有相应的字段名:

1
2
3
4
5
data: {
name2: '',
lunyu: '',
method: '',
},

等着被传入的数据覆盖就好了。

点击图片放大

以前用微信不知道,原来点一下图片会放大都有代码支持…嗯..这个能搜到很多,我就不贴了。

搜索功能

难点和思路

这个功能是后加的,因为最令我头疼的是,网上的例子,大家的搜索都是从后台获取数据的,要不就是链接sql用模糊查询的,再不然就是全是代码看不懂干了啥的,没有跟我一样是把数据放在页面上,然后搜索的,所以就算他再简单,我也不知道有啥方法…

这里我的解决办法是搜索缓存,我能确定对我帮了我大忙的参考网址是下拉列表

本来的难点就是用户搜索我们不知道他们会输入啥,比如有一个小鸟电动车大鸟电动车吧,他万一输电动车呢,就不跟我源数据匹配了,所以用下拉列表的方法,实现两种情况。一是输入电动车,出现小鸟电动车大鸟电动车,然后用户点击小鸟电动车,则精准搜索小鸟电动车,那我只用给小鸟电动车的结果就行;再一种是输入电动车,直接点搜索,那我就得建个页面,放上所有的搜索结果,即小鸟电动车大鸟电动车;当然还有第三种情况,用户搜索砖头,我没有砖头,那就再给他返回一种情况即可,这样一共三种情况。

实现方式

代码方面,用到刚才那个搜索下拉列表的网址链接,然后再只需要加一个表单的动作<form bindsubmit="formSubmit">,注意是加在整个搜索栏外面,然后formsubmit就写:

1
2
3
4
5
6
formSubmit: function (e) {
var key = e.detail.value.keyword;
wx.navigateTo({
url: '/pages/category2/search?name=' + key,
})
},

然后去写search.js,去接一下那边来的数据,

1
2
3
4
5
6
7
8
onLoad: function (options) {
var state = wx.getStorageSync('have');
var list = wx.getStorageSync('list')
this.setData({
search: options.name,
state: state,
list: list
})

这里state我用来控制前面说的几种情况,然后针对个人情况想办法和你放在页面上的数据匹配,然后显示就可以了。

个人觉得最难的是搜索,其它的想做什么网上都有许多现成的。

如果以上说的有什么问题可以联系我。

reference

不太会写参考文献,好像我每篇博客的reference格式都不一样..但以下都是过程中对我有帮助的!

  1. 大佬友链,http://klausvon.cn
  2. 微信小程序input输入框关键字自动联想,https://www.jianshu.com/p/3f40578cb94b
  3. 阿里巴巴矢量图库,https://www.iconfont.cn
  4. MDN WEB文档,https://developer.mozilla.org/zh-CN/
  5. W3Cschool,https://www.w3cschool.cn/weixinapp/
  6. js 刷新当前页面,https://www.jianshu.com/p/d8176460efc4