微信小程序:把卖电影票的vue卖座网项目改写成小程序【诗书画唱】
目录:
例子:把卖电影票的vue卖座网项目改写成小程序的标上序号的步骤

其实本例子的实质是:用别的语言实现原来语言的代码功能。

开三个参考

开启vue项目的前后台,看运行效果。由此确定我先要实现的是导航条部分,暂时我想先显示当前热映部分的界面

关于页面等的组件一般我习惯是创建在pages文件夹里面的,创建方法就是先自己命名个组件的名字的文件夹,后面鼠标右键点击【新建Component】选项,只输入index后按回车就会自动生成4个文件

首先我要实现的是导航栏和界面跳转等等的功能(项目结构可以先自定义,后面功能界面都实现后,进行优化,代码重构等等):
*百度得知 <navigator url="/pages/Comingplaying/index">跳转到新页面</navigator>可以成功跳转,记得“/”要加在组件路径里面。
常常自己创建些说明文件在旁边
*查看开发者文档(一般想实现什么这里都可以找到示例,很好用),依次点【帮助】,【开发文档】选项,之后点在开发者工具中预览效果
因为是别人写的代码可能不是很好用,有时会进行重命名,代码重构成自己熟悉的内容,逻辑等等变更清晰,更方便我使用
先把基本上都会出现的组件(界面)都创建好,至少先实现导航栏和界面跳转

个人设置tabbar导航栏的方法
个人查看了B站的视频和自己的尝试和总结,得知
app.json中的
"tabBar"中的 "custom"为 false就是只配置app.json就可以实现全局的导航栏tabbar,否则就要写别的代码
开发者文档中的框架中的全局配置等等和指南中的内容值得结合查看

图片的获取可以直接鼠标右键另存图片,也可以检查后访问图片路径,不行就多次访问,然后另存图片,剪切到想要放的项目位置里面,同时也可以到iconfont阿里巴巴矢量图标库
https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a

app.json中的selectedIconPath是选后的图标路径,"iconPath"是选前的图标路径,
"selectedColor"是选择后的颜色,#ff5f16之类的样式就是鼠标右键点检查,
查看卖座网的样式复制得来的

微信小程序中的顶部选项卡和底部选项卡(全局或局部的自定义导航栏tabbar)都可以百度关键词后自己修改成满足自己需求的内容
https://www.jb51.net/article/161227.htm我找到的代码必须自己注释掉,修改一些样式代码才真正有用

vue中的请求头是headers,微信小程序中的请求头是header(基本上有些时候,X-Client-Info和X-Host是请求头中必备,如果不写,就访问不到网站的数据)。我只所以知道这个,是因为我百度了些资料,之后参考,之后尝试我的猜想,尝试自己的猜想后,记录成功等等的说明等等很有用。

常常百度XXX和YYY等等的区别,让我更好的使用XXX和YYY等等
page和component的区别
简单地说,page是官方默认组件,component是自定义组件。当你需要开发一个有特色的,可灵活配置样式的小程序,就要用到component。开发一个小程序前先确定是否需要自定义component模板来做,相对来说,page比较简单快捷,但是样式固定单一。而component可以有更多功能,例如头部返回主页按钮,头部图片背景,自定义底部导航样式和底部导航根据头部背景色而变化等等。
在创建组件文件夹后,鼠标右键可以创建page或component

因为要顶部的切换条功能要用Page,那么基本上要是父组件,那么我就要是把原先的FilmHeader整合到Film组件中,共同作为父组件,把请求到的数据传给子组件Nowplaying和Comingplaying

要把请求到的数据"."成json格式的数组,之后wxml文件中遍历数组等等。pages中一般创建page或component,父组件或子组件,页面之类的组件,而components中一般创建component,子组件。
其实Nowplaying和Comingplaying也可以整合到Film这个父组件里面,
这样我就不必进行父组件传值到子组件里面了
不过,为了让Film这个父组件里面不要太多等等的原因,我还是不整合了

加载长数据的话,数据会显示不完整,只显示一页,自己参考官方文档,一般用系统的布局,比如
下滑有系统默认和自定义的,系统默认就很简单:<div>或
<view>外套个
<scroll-view
scroll-y style="width: 100%; height: 100%;"
refresher-enabled="{{true}}"
refresher-threshold="{{100}}"
refresher-default-style="white"
refresher-background="lightgreen"
refresher-triggered="{{triggered}}"
bindrefresherpulling="onPulling"
bindrefresherrefresh="onRefresh"
bindrefresherrestore="onRestore"
bindrefresherabort="onAbort"
>
</scroll-view>就可以了。同时微信小程序中似乎没有<img>,只有<image>

例子:把卖电影票的vue卖座网项目改写成小程序的标上序号的步骤
1

2
其实本例子的实质是:用别的语言实现原来语言的代码功能。
开三个参考

开启vue项目的前后台,看运行效果。由此确定我先要实现的是导航条部分,暂时我想先显示当前热映部分的界面


由观察可得,控制一开始就显示的界面的文件是app.json

删除以下文件

关于页面等的组件一般我习惯是创建在pages文件夹里面的,创建方法就是先自己命名个组件的名字的文件夹,后面鼠标右键点击【新建Component】选项,只输入index后按回车就会自动生成4个文件

首先我要实现的是导航栏和界面跳转等等的功能(项目结构可以先自定义,后面功能界面都实现后,进行优化,代码重构等等):
*百度得知 <navigator url="/pages/Comingplaying/index">跳转到新页面</navigator>可以成功跳转,记得“/”要加在组件路径里面。


常常自己创建些说明文件在旁边

*查看开发者文档(一般想实现什么这里都可以找到示例,很好用),依次点【帮助】,【开发文档】选项,之后点在开发者工具中预览效果



因为是别人写的代码可能不是很好用,有时会进行重命名,代码重构成自己熟悉的内容,逻辑等等变更清晰,更方便我使用

先把基本上都会出现的组件(界面)都创建好,至少先实现导航栏和界面跳转

个人设置tabbar导航栏的方法
个人查看了B站的视频和自己的尝试和总结,得知
app.json中的
"tabBar"中的 "custom"为 false就是只配置app.json就可以实现全局的导航栏tabbar,否则就要写别的代码

开发者文档中的框架中的全局配置等等和指南中的内容值得结合查看



图片的获取可以直接鼠标右键另存图片,也可以检查后访问图片路径,不行就多次访问,然后另存图片,剪切到想要放的项目位置里面,同时也可以到iconfont阿里巴巴矢量图标库
https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a

app.json中的selectedIconPath是选后的图标路径,"iconPath"是选前的图标路径,
"selectedColor"是选择后的颜色,#ff5f16之类的样式就是鼠标右键点检查,
查看卖座网的样式复制得来的

微信小程序中的顶部选项卡和底部选项卡(全局或局部的自定义导航栏tabbar)都可以百度关键词后自己修改成满足自己需求的内容
https://www.jb51.net/article/161227.htm我找到的代码必须自己注释掉,修改一些样式代码才真正有用





遇到要实现的功能等等可以百度或搜索b站的教程视频,自己的教程等等,后面进行尝试等等,比如API_request网络请求,wx.request的使用,请求别人网址的数据,API,接口等等,我就是参考了别的b站up的教程视频。https://www.bilibili.com/video/BV1WQ4y1T7D8?p=22&share_source=copy_web
(可请求到的数据的路径:https://edu.newsight.cn/wxList.php)


onLoad:function (options)
中的方法不起作用的原因是你看你app.json中是先加载哪个组件,先加载的组件中的js文件中的onLoad:function (options) 方法才会触发
个人认为wx.request的好处是不用自己做跨域访问设置,只要设置不校检合法域名即可

vue中的请求头是headers,微信小程序中的请求头是header(基本上有些时候,X-Client-Info和X-Host是请求头中必备,如果不写,就访问不到网站的数据)。我只所以知道这个,是因为我百度了些资料,之后参考,之后尝试我的猜想,尝试自己的猜想后,记录成功等等的说明等等很有用。


下面是我自己修改的官方的实例的代码,父子组件传值(我常用父组件传给子组件,父组件常常为app.json中设置的先显示的部分)

子组件中的index.js要实现父子传值就要用Component,而不是Page。
父组件中的index.js中用Page


常常百度XXX和YYY等等的区别,让我更好的使用XXX和YYY等等
page和component的区别
简单地说,page是官方默认组件,component是自定义组件。当你需要开发一个有特色的,可灵活配置样式的小程序,就要用到component。开发一个小程序前先确定是否需要自定义component模板来做,相对来说,page比较简单快捷,但是样式固定单一。而component可以有更多功能,例如头部返回主页按钮,头部图片背景,自定义底部导航样式和底部导航根据头部背景色而变化等等。
在创建组件文件夹后,鼠标右键可以创建page或component

因为要顶部的切换条功能要用Page,那么基本上要是父组件,那么我就要是把原先的FilmHeader整合到Film组件中,共同作为父组件,把请求到的数据传给子组件Nowplaying和Comingplaying

要把请求到的数据"."成json格式的数组,之后wxml文件中遍历数组等等。pages中一般创建page或component,父组件或子组件,页面之类的组件,而components中一般创建component,子组件。
其实Nowplaying和Comingplaying也可以整合到Film这个父组件里面,
这样我就不必进行父组件传值到子组件里面了
不过,为了让Film这个父组件里面不要太多等等的原因,我还是不整合了

关于样式怎么调,我个人的心得体会就是平时“封装”一些自己写出来等等的常见样式模板,以后用,很多都要自己调,rpx,flex等等很常用,百度一些样式,弹性盒子布局等等

加载长数据的话,数据会显示不完整,只显示一页,自己参考官方文档,一般用系统的布局,比如
下滑有系统默认和自定义的,系统默认就很简单:<div>或
<view>外套个
<scroll-view
scroll-y style="width: 100%; height: 100%;"
refresher-enabled="{{true}}"
refresher-threshold="{{100}}"
refresher-default-style="white"
refresher-background="lightgreen"
refresher-triggered="{{triggered}}"
bindrefresherpulling="onPulling"
bindrefresherrefresh="onRefresh"
bindrefresherrestore="onRestore"
bindrefresherabort="onAbort"
>
</scroll-view>就可以了。同时微信小程序中似乎没有<img>,只有<image>
