微信小程序–（小白基础入门）

大家好，欢迎来到IT知识分享网。

目录

一、注册微信小程序–实现底部导航栏

1.先自己注册一个小程序账号

2.创建一个小程序，AppID可以在小程序后台菜单开发管理中开发设置中查看

二、登录功能界面和微信授权界面的转换

三、把个人头像、昵称传送到个人信息页面上

四、实现退出功能（不返回登录页面）

五、实现关于客服相关对话功能

六、实现小程序头部固定各页面上

一、注册微信小程序–实现底部导航栏

[如有不足欢迎补充评论]

1.先自己注册一个小程序账号

（1）在任何浏览器中搜索“微信小程序官方”在里面进行注册

（2）在里面填写相关的基本信息，进入邮箱激活点击链接

（3）填写信息登记，完成注册。

2.创建一个小程序，AppID可以在小程序后台菜单开发管理中开发设置中查看

(1)每一个界面都在默认生成的pages文件下。默认叫index.wxml

 注意：

      index.js   后续写动态效果代码的位置    特效与后台交互获取数据

​      index.json  引用其它组件内容的配置文件位置

​      index.wxml   类似于html页面，写布局的

​      index.wxss 类似与写的css文件

（2）在app.json中编写页面，每个页面都需要配置app.json文件中

（2）在tabBar中编写导航栏

二、登录功能界面和微信授权界面的转换

1.在顶部编写标题

2.在login.wxml中编写头部内容，在login.wxss中编写样式

3.在login.wxml中编写账号密码内容，在login.wxss中编写样式

4.在login.wxml中编写微信授权内容，在login.wxss中编写样式

5.在login.wxml中编写微信账号切换内容，在login.wxss中编写样式

6.实现切换内容

(1)在<radio>在给个value的值，并在微信授权和账号登录用wx:if–else判断loginMod

(2)在login.js里面编写date方法,使loginMod为true

(3)如果rdvalue的值等于0则跳转微信授权页面反之账号登录页面。

7.输入正确账号密码登录跳转

(1)在login.wxml中编写，在login.wxss中写样式

（2）在app.json中建一个uesrinfo页面

（3）在login.js编写代码判断账号密码是否正确，在login.wxml中不要忘了给name值。

（4）输入正确的账号密码实现跳转页面效果图如下：

三、把个人头像、昵称传送到个人信息页面上

(1)在login中的login.wxml编写一个<button>

（2）在login中的login.js编写获取头像、昵称的值的事件

(3)在uesrinfo中的uesrinfo.js先给data两个值分别为“mingzi”,”touxiang”并且给一个空值和一个默认的头像，然后用options在编写获取其他页面的值

(4)然后在uesrinfo.wxml里面把<image src>和<text>>换成{
{touxiang}}、{
{mingzi}}

（5）最终实现效果  注意：如果没有提示框可以在左上角详情里面找需要把调试基础库调试到2.22.1以下

四、实现退出功能（不返回登录页面）

(1)在uesrinfo.wxml中编写退出按钮  要用bind:tap

(2)在uesrinfo.js编写退出事件

（3）效果图

五、实现关于客服相关对话功能

(1)在login里面的login.wxml中在<image>下面加一个<button>按钮

注意：要使用 open-type=”contact”

（2）在login里面的login.wxss中编写样式

（3）效果图  

注意：需要真机调试，也可以自己在小程序里面添加客服

六、实现小程序头部固定各页面上

(1)需要自己先在根目录里面创建toubu文件夹，然后点击右键创建Component

(2)把login.wxml的头部内容移动到toubu.wxml中

（3）把login.wxss的头部内容样式移动到toubu.ss中

（4）要用头部内容的话，需要在.json编写，然后使用<toubu></toubu>即可。